CSS Animation property stays after animating


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…

Here is the code for preservation…


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

h2 {
    animation: fadeIn 1s ease-in-out 3s;

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




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


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 By – Fabrizio Calderan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published