I'm using this code to make an effect and keep the element in the end position of the animation, that is, to the right.
HTML :
<div id="anim">
</div>
CSS Code :
#anim{
position: relative;
background: green;
width: 100px;
height: 100px;
}
#anim:hover{
-webkit-animation-name: toRight;
animation-duration: 1s;
}
@-webkit-keyframes toRight{
from {left: 0px;}
to {left: 200px;}
}
@keyframes toRight{
from {left: 0px;}
to {left: 200px;}
}
Using animation-fill-mode with forwards .
@-webkit-keyframes right {
from { left: 0px }
to { left: 200px }
}
@keyframes right {
from { left: 0px }
to { left: 200px }
}
div {
position: absolute;
height: 100px;
width: 100px;
background-color: skyblue;
-webkit-animation: right 2s forwards;
animation: right 1s forwards;
}<div></div> Try adding animation-fill-mode: forwards; , for example:
-webkit-animation: toRight 1.0s forwards;