Made animations, work, but after the end of the animation, the element returns to the starting position (0%).

Question: how to make it so that after performing the animation, the element remains in the last position (100%)?

Animations:

@-webkit-keyframes roll-6 { 0% {left: 25px;} 10% {left: -75px;} 25% {left: 75px;} 50% {left: -26px;} 75% {left: -127px;} 100% {left: 127px;} } @keyframes roll-6 { 0% {left: 25px;} 10% {left: -75px;} 25% {left: 75px;} 50% {left: -26px;} 75% {left: -127px;} 100% {left: 127px;} } .roll-6 { -webkit-animation-name: roll-6; -webkit-animation-duration: 6s; -webkit-animation-iteration-count: 3; animation-name: roll-6; animation-duration: 6s; animation-iteration-count: 3; }
  • 2
    animation-fill-mode: forwards - NeedHate
  • duplicate of the question of stackoverflow.com/questions/748335/… - kizoso
  • create one question, and edit it as necessary, no need to create duplicates, and extra accounts - kizoso

1 answer 1

animation-fill-mode: forwards; does not unwind the animation or in a short record animation: название длительность forwards;