Keep CSS animation in final state at end

Question

I'm animating some elements that are set to opacity: 0; in CSS. An animation class is applied to the onClick event, using keyframes, which changes the opacity from 0 to 1 (and a few other changes).

Unfortunately, when the animation ends, the element returns to a state of opacity: 0 (in both Firefox and Chrome). My instinct is that animated elements will remain in their final state, overriding their original properties. Isn't this true? If not, how can I keep the element in its final state?

Code (excluding prefix versions):

@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

If you use more animation properties, you can use Shorthand :

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

Set like this:

• bubble Animation name
• 2s Duration
• linear Time function
• 0.5s Delay
• 1 Number of iterations (can be 'infinite')
• normal Direction
• forwards fill mode (set to 'backwards' if you wish to be compatible with using the end position as the final state [this is to support browsers with animations turned off] {only answer headers, not your specific situation})

Available time functions:

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

Available directions:

normal | reverse | alternate | alternate-reverse

Answer 2

Try adding animation-fill-mode: forwards;. For example, you can use abbreviations like this:

animation: bubble 1.0s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode