Ryan Castle Ryan Castle - 1 month ago 6
HTML Question

How to prevent a CSS animation from going back to its original position?

So, my CSS moves a div to -40px after 3 seconds. After doing so, the div is then moved back to its original position. Here is the code:

#jsAlert {
width: 100%;
height: 40px;
position: absolute;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 0.6);
animation:mymove 3s;
animation-delay: 3s;

/*Safari and Chrome*/
-webkit-animation: mymove 2s;
-webkit-animation-delay: 2s;
}

@keyframes mymove {
from {top: 0px;}
to {top: -40px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {top: 0px;}
to {top: -40px;}
}


How would I prevent the div from returning to its original position?

Answer Source

You need to use animation-fill-mode with a value set to forwards

From Mozilla Developer Network:

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count

Demo