Utrzymywanie stanu końcowego na końcu animacji CSS3

177

Uruchomiłem animację dla niektórych elementów, które są ustawione na opacity: 0; w CSS. Klasa animacji zostanie zastosowana onClick, a przy użyciu klatek kluczowych zmieni ona krycie z 0 na 1 (między innymi).Utrzymywanie stanu końcowego na końcu animacji CSS3

Niestety, po zakończeniu animacji elementy wracają do wersji opacity: 0 (zarówno w Firefoksie, jak i w przeglądarce Chrome). Moje naturalne myślenie polegałoby na tym, że animowane elementy zachowują ostateczny stan, przewyższając ich pierwotne właściwości. Czy to nie prawda? A jeśli nie, w jaki sposób mogę uzyskać ten element?

kod (poprzedzony wersje nie są wliczone):

@keyframes bubble { 
    0% { transform:scale(0.5); opacity:0.0; } 
    50% { transform:scale(1.2); opacity:0.5; } 
    100% { transform:scale(1.0); opacity:1.0; } 
}

Źródło

2012-10-20 Dan

Zamierzę własną notkę: http://stackoverflow.com/questions/9196694/css3-animation-scale Przynajmniej moja ma bardziej pouczający tytuł! – Dan

możliwy duplikat [CSS3 Animate: Jak sprawić, by obiekt nie powrócił do swojej początkowej pozycji po uruchomieniu animacji?] (Http://stackoverflow.com/questions/6897724/css3-animate-how-to-have-the- object-not-revert-to-its-initial-position-after-an) –

300

spróbuj dodać animation-fill-mode: forwards;. Na przykład, jak to:

animation: bubble 1.0s forwards; 
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */

Źródło

2012-10-20 18:02:03

Tak, to jest to. Sprawdzę twoją odpowiedź, kiedy będę mógł. Jeśli którykolwiek szef CSS chce skomentować logikę tego, co jest wymagane, chciałbym to wiedzieć! – Dan

Możesz przeczytać o właściwości trybu wypełniania animacji tutaj - http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Mam nadzieję, że to pomaga! –

@Dan wartość 'forward' właściwości' animation-fill-mode' zapewnia, że element będzie utrzymywał ostatni stan klatki kluczowej animacji po zakończeniu animacji. na przykład, jeśli twoja animacja zmienia "szerokość" z 0 na 100px, ta właściwość zapewnia, że element pozostanie na poziomie 100 pikseli po zakończeniu animacji. –

Jeśli używany więcej animacji atrybutów jest skrótem:

animation: bubble 2s linear 0.5s 1 normal forwards;

na czas 2s, liniowe taktowania funkcją opóźnienia, 0,5 s, 1 iteracji według wzoru, w normalnym kierunku , tryb wypełnienia do przodu

Źródło

2017-01-14 00:28:01 agiopnl

Utrzymywanie stanu końcowego na końcu animacji CSS3

Odpowiedz

Powiązane problemy