Maintaining the final state at end of a CSS3 animation

Question

I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things).

Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?

The code (prefixed versions not included):

@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; } } 

Answer 1

Try adding animation-fill-mode: forwards;. For example like this:

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

Answer 2

If you are using more animation attributes the shorthand is:

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

This gives:

• bubble animation name
• 2s duration
• linear timing-function
• 0.5s delay
• 1 iteration-count (can be 'infinite')
• normal direction
• forwards fill-mode (set 'backwards' if you want to have compatibility to use the end position as the final state[this is to support browsers that has animations turned off]{and to answer only the title, and not your specific case})