Maintaining the final state at end of a CSS3 animation

css css-animations
Dan picture Dan · Oct 20, 2012 · Viewed 190.7k times · Source

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

Christofer Vilander picture Christofer Vilander · Oct 20, 2012

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;

Related questions

How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More
css3 transition animation on load?

Is it possible to use CSS3 transition animation on page load without using Javascript? This is kind of what I want, but on page load: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html What I found so far CSS3 …

Read More
CSS3 Spin Animation

I have reviewed quite a few demos and have no idea why I can't get the CSS3 spin to function. I am using the latest stable release of Chrome. The fiddle: http://jsfiddle.net/9Ryvs/1/

Read More