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>

Obala

Is w3schools outdated? It says Chrome and FireFox only support alternatives. – Fehr

@iambriansreed: I always assume it is :) – Trapper

@Fehr don't even click w3schools search results. If you accidentally do, look away from your monitor and press the back button on your mouse. – Rutkowski

Answer 1

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»

Comportment

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 – Obala

Is this available in raw SVG animation? – Torquemada

Answer 2

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>

Submission

Answer 3

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

animation-fill-mode: forwards;

Dacron

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. – Demodulation

Answer 4

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>

Westerman

Answer 5

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

Pepito