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


so, css moves div -40px after 3 seconds. after doing so, div moved original position. here 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 , chrome*/     -webkit-animation: mymove 2s;     -webkit-animation-delay: 2s; }  @keyframes mymove {     {top: 0px;}     {top: -40px;} }  @-webkit-keyframes mymove /*safari , chrome*/ {     {top: 0px;}     {top: -40px;} } 

how prevent div returning original position?

you need use animation-fill-mode value set forwards

from mozilla developer network:

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

demo


Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -