Mam 4-częściową animację CSS3 odtwarzaną po kliknięciu - ale ostatnia część animacji ma na celu zdjęcie jej z ekranu.
Jednak po odtworzeniu zawsze wraca do pierwotnego stanu. Każdy wie, jak mogę go zatrzymać na ostatniej ramce css (100%) , a także, jak pozbyć się całego diva, w którym on gra, gdy gra.
@keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
css
css-animations
użytkownik531192
źródło
źródło
Odpowiedzi:
Szukasz:
Więcej informacji o MDN i liście obsługiwanych przeglądarek w canIuse .
źródło
-webkit-animation-fill-mode: forwards;
100% {}
anito {}
zestawu, więc nawet przyanimation-fill-mode: forwards;
mojej animacji nadal mnie rzucił0%
. (Użyłem pętli @for do tworzenia animacji i zapomniałem ręcznie dodaćfrom{}
ato{}
);Jeśli chcesz dodać to zachowanie do
animation
definicji właściwości skróconej , kolejność właściwości podrzędnych jest następującaanimation-name
- domyślnienone
animation-duration
- domyślnie0s
animation-timing-function
- domyślnieease
animation-delay
- domyślnie0s
animation-iteration-count
- domyślnie1
animation-direction
- domyślnienormal
animation-fill-mode
- musisz to ustawićforwards
animation-play-state
- domyślnierunning
Dlatego w najczęstszym przypadku wynik będzie taki:
Zobacz dokumentację MDN tutaj
źródło
Obsługa przeglądarki
Stosowanie:-
źródło
Najlepszym sposobem wydaje się umieszczenie stanu końcowego w głównej części css. Tak jak tutaj, ustawiłem szerokość
220px
, aby w końcu stała się220px
. Ale zaczyna się0px;
źródło
Problem nie polega na tym, że ustawiasz webkitAnimationName z powrotem na zero, więc to resetuje CSS twojego obiektu z powrotem do stanu domyślnego. Czy nie pozostanie tam, gdzie się skończyło, jeśli po prostu usuniesz funkcję setTimeout, która resetuje stan?
źródło
Właśnie opublikowałem podobną odpowiedź i prawdopodobnie chcesz rzucić okiem na:
http://www.w3.org/TR/css3-animations/#animation-events-
Możesz dowiedzieć się o aspektach animacji, takich jak uruchamianie i zatrzymywanie, a następnie, gdy powiesz, że wydarzenie „stop” zostało uruchomione, możesz zrobić wszystko, co chcesz w domenie. Wypróbowałem to jakiś czas temu i może działać, ale domyślam się, że na razie będziesz ograniczony do webkita (ale prawdopodobnie już to zaakceptowałeś). Przy okazji, ponieważ zamieściłem ten sam link dla 2 odpowiedzi, oferuję tę ogólną radę: sprawdź W3C - w zasadzie piszą zasady i opisują standardy. Również strony programistyczne dla webkitów są dość kluczowe.
źródło
Nikt go tak naprawdę nie przyniósł, więc sposób, w jaki został stworzony, jest ustawiony na wstrzymanie animacji .
źródło
Dowiedziałem się dzisiaj, że istnieje limit, którego chcesz użyć w trybie wypełniania. To jest od twórcy Apple. Plotka jest * około * szósta, ale nie jest pewna. Alternatywnie możesz ustawić początkowy stan swojej klasy na sposób zakończenia animacji, a następnie * zainicjować * ją z / 0%.
źródło