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

User · Accepted Answer

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

User · Answer

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

User · Answer

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   x000D   x000D  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   lt h1 gt The keyframes  lt  h1 gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

[css] Maintaining the final state at end of a CSS3 animation

Examples related to css

Examples related to css-animations