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 origin

Answer 1

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