Can’t stop css animation disappearing after last key frame
I’ve got a simple css animation that I’d like to play and then stop on the last frame fully displaying the image. But currently at the moment it plays then seems to revert back to frame one so the santas face disappears.
How can i make it play through once then stop on the last key frame or display the image without it fading out again?
animation-fill-mode: forwards to prevent this from happening.
Additionally, you need to end with an opacity of 1, therefore the last frame must have an opacity of 1.
jsFiddle example - it works as expected now.
You can also shorten your keyframe by removing
0%, as this is already given in the initial state.
You could also combine
Since you are using multiple animation properties, use the animation shorthand:
<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>`
Which would be:
animation: santaappear 13s 2s forwards; -moz-animation: santaappear 13s 2s forwards; -webkit-animation: santaappear 13s 2s forwards;
In the demo, I added vendor prefixes for
-webkit. In addition to these you should have one written without a prefix. Same goes for the keyframes.