When trying to repeat an animation using Animation-Iteration-Count, the animation resets until last iteration when animation-fill-mode is forwards.
I wanted to animate a div moving forward twice. When I made the animation, it moved forward once, reset, then moved forward again and stayed there. I wasn’t able to find anyone with my problem on google.
HTML:
<body>
<div></div>
</body>
CSS:
div {
width:100px;
height:100px;
background-color:red;
animation: animation 2s 2 forwards;
}
@keyframes animation {
0% {
transform:translateX(0);
}
100% {
transform:translateX(100px);
}
}
New contributor
Sameer R is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.