CSS Animation property stays after animating

Question

I'm trying to get a CSS animation property to stay after completing, is this possible?

This is what I'm trying to achieve...

The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there.

Here is a fiddle attempt... http://jsfiddle.net/GZx6F/

Here is the code for preservation...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

I know how to do this with jQuery.. it would be like this...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

Is [w3schools](http://www.w3schools.com/cssref/css3_pr_keyframes.asp) outdated? It says Chrome and FireFox only support alternatives. — iambriansreed, Mar 19 '12 at 17:28
@iambriansreed don't even click w3schools search results. If you accidentally do, look away from your monitor and press the back button on your mouse. — doug65536, Oct 05 '13 at 18:17

score 228 · Accepted Answer · answered Mar 19 '12 at 17:26

228

I think you're looking for animation-fill-mode CSS3 property

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

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

for your purpose just try to set

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»

answered Mar 19 '12 at 17:26

Fabrizio Calderan

120,726
26
164
177

1

Thanks Fabrizio, that's great, I'll accept that answer. Just one odd thing is happening that I wonder whether you know anything about - on iOS (haven't tested anything else), the countdown to the ease-in is paused whenever I scroll, e.g. if I start scrolling straight away when the page loads it doesn't fade in. But when I STOP scrolling the 3s starts counting down. Is this just default iOS behaviour? Thanks – SparrwHawk Mar 19 '12 at 17:46
Is this available in raw SVG animation? – Justin Oct 20 '20 at 18:30

score 19 · Answer 2 · edited May 23 '17 at 12:02

In addition to the answer of @Fabrizio Calderan, it has to be said that you can even apply the animation-fill-mode property forwards directly to animation. So the following should also work:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

score 2 · Answer 3 · answered Jul 16 '18 at 19:40

How to animate an element and get it to stay as the animation is done:

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>

score 1 · Answer 4 · answered Jul 30 '15 at 19:56

1

I had something similar happening to me. I added position:relative to the element that was animating and that fixed it for me.

answered Jul 30 '15 at 19:56

tyau

186
1
2

score 1 · Answer 5 · answered Jul 07 '22 at 14:55

1

If I understand your question, you want the animation to remain in the final state . I would use fill mode

animation-fill-mode: forwards;

answered Jul 07 '22 at 14:55

Ben Offonime

21
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 07 '22 at 23:10

CSS Animation property stays after animating

5 Answers5

Linked