Stopping a CSS3 Animation on last frame

Question

I have a 4 part CSS3 animation playing on click  - but the last part of the animation is meant to take it off the screen    However  it always goes back to its original state once it has played  Anyone know how I can stop it on its last css frame  100    or else how to get rid of the whole div it is in once it has played     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

User · Answer

Nobody actualy brought it so  the way it was made to work is animation-play-state set to paused

User · Answer

If you want to add this behaviour to a shorthand animation property definition  the order of sub-properties is as follows  animation-name - default none  animation-duration - default 0s  animation-timing-function - default ease  animation-delay - default 0s  animation-iteration-count - default 1  animation-direction - default normal  animation-fill-mode - you need to set this to forwards  animation-play-state - default running  Therefore in the most common case  the result will be something like this  animation  colorchange 1s ease 0s 1 normal forwards    See the MDN documentation here

User · Answer

I just posted a similar answer  and you probably want to have a look at   http   www w3 org TR css3-animations  animation-events-  You can find out aspects of an animation  such as start and stop  and then  once say the  stop  event has fired you can do whatever you want to the dom   I tried this out some time ago  and it can work  but I d guess you re going to be restricted to webkit for the time being  but you ve probably accepted that already    Btw  since I ve posted the same link for 2 answers  I d offer this general advice  check out the W3C - they pretty much write the rules and describe the standards   Also  the webkit development pages are pretty key

User · Answer

I learned today that there is a limit you want to use for the fill-mode  This is from an Apple dev  Rumor is   around   six  but not certain  Alternatively  you can set the initial state of your class to how you want the animation to end  then   initialize   it at from   0

User · Answer

Isn t your issue that you re setting the webkitAnimationName back to nothing so that s resetting the CSS for your object back to it s default state   Won t it stay where it ended up if you just remove the setTimeout function that s resetting the state

User · Answer

-webkit-animation-fill-mode  forwards     Safari 4 0 - 8 0    animation-fill-mode  forwards     Browser Support   Chrome 43 0  4 0 -webkit-  IE  10 0   Mozilla 16 0   5 0 -moz-  Shafari   4 0 -webkit-     Opera 15 0 -webkit-  12 112 0 -o-    Usage -   fadeIn     animation-name  fadeIn      -webkit-animation-name  fadeIn       animation-duration  1 5s      -webkit-animation-duration  1 5s       animation-timing-function  ease      -webkit-animation-timing-function  ease        animation-fill-mode  forwards      -webkit-animation-fill-mode  forwards       keyframes fadeIn     from       opacity  0         to       opacity  1          -webkit-keyframes fadeIn     from       opacity  0         to       opacity  1

User · Answer

You re looking for   animation-fill-mode  forwards    More info on MDN and browser support list on canIuse

User · Answer

The best way seems to put the final state at the main part of css  Like here  i put width to 220px  so that it finally becomes 220px  But starting to 0px   div menu-item1     font-size  20px    border  2px solid  fff    width  220px    animation  slide 1s    -webkit-animation  slide 1s     Safari and Chrome       -webkit-keyframes slide      Safari and Chrome      from  width 0px     to  width 220px

[css] Stopping a CSS3 Animation on last frame

Examples related to css

Examples related to css-animations