CSS Animation Property Remains After Animation

Question

I am trying to get a CSS animation property to stay after completion, is this possible?

This is what I am trying to achieve ...

The element should be hidden when the user lands on the page, after 3 seconds (or something else), it should disappear, and after the animation has finished, it should remain there.

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

Here is the code to save ...

<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 .. that would be so ...

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

Answer 1

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

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

The CSS animation fill property specifies how CSS animations should apply styles to their goal before and after it is completed.

for your purpose just try installing

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

Setting the forwarding value "the target will save the calculated values ​​set by the last keyframe encountered at run time"

Answer 2

In addition to answer @Fabrizio Calderan , you have to say that you can even apply the animation-fill-mode forwards directly to the animation . Therefore, you 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> 

Answer 3

I had something similar with me. I added a provision: regarding an element that was animated and that fixed it for me.

Answer 4

How to animate an element and make it stay in the process of animation:

 // 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> 

Answer 5

May I ask a question about this last answer because it is very close to working for me, however I have this #box div inside another div that js is applied to, saying

 $ (document).ready (function() { setTimeout (function(){ $("div.center-div").fadeOut(1200); { $("div.center-div").remove(1200); }; },5500); }); 

I have this (.center-div) div with svg which then completely disappears. There is a bg image that remains in place after extinction. Works great. I want the div #box, as mentioned above, to appear and then remain (all this on top of other svg), but I can not get this to work. If I add this #box div to (.center-div), it will just be added under another div. Used z-index to no avail. I tried to create a class instead of id - what can I do to get this last element of the svg line animation to enter and stay when there is javascript in the envelope of the div to disappear and delete?

Link to an example: http://bss.com/RK/full3.html - I want the word MEDIA to stay on top of the background image after it is recorded. Can someone help me with this?