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; }
}
This question is related to
css
css-animations
IF NOT USING THE SHORT HAND VERSION: Make sure the animation-fill-mode: forwards
is AFTER the animation declaration or it will not work...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
If you are using more animation attributes the shorthand is:
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
bubble
animation name2s
durationlinear
timing-function0.5s
delay1
iteration-count (can be 'infinite
')normal
directionforwards
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})Use animation-fill-mode: forwards;
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Note: The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Working example
div {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: red;_x000D_
position :relative;_x000D_
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */_x000D_
animation: bubble 3s forwards;_x000D_
/* animation-name: bubble; _x000D_
animation-duration: 3s;_x000D_
animation-fill-mode: forwards; */_x000D_
}_x000D_
_x000D_
/* Safari */_x000D_
@-webkit-keyframes bubble {_x000D_
0% { transform:scale(0.5); opacity:0.0; left:0}_x000D_
50% { transform:scale(1.2); opacity:0.5; left:100px}_x000D_
100% { transform:scale(1.0); opacity:1.0; left:200px}_x000D_
}_x000D_
_x000D_
/* Standard syntax */_x000D_
@keyframes bubble {_x000D_
0% { transform:scale(0.5); opacity:0.0; left:0}_x000D_
50% { transform:scale(1.2); opacity:0.5; left:100px}_x000D_
100% { transform:scale(1.0); opacity:1.0; left:200px}_x000D_
}
_x000D_
<h1>The keyframes </h1>_x000D_
<div></div>
_x000D_
Source: Stackoverflow.com