There is the code below, the main logic: ul from the right to left moves with nested slides li. Problems 2: 1 - after the completion of the animation, the appearance returns to the initial state. 2 - in safari, this animation runs once, or after switching to another window and returning back. I would like to work after each page refresh.

-webkit-animation: cssAnimation 5s ease; -moz-animation: cssAnimation 5s ease; -o-animation: cssAnimation 5s ease; } @-webkit-keyframes cssAnimation { from { -webkit-transform: scale(1) translate(100%); } to { -webkit-transform: scale(1) translate(-65%); } } @-moz-keyframes cssAnimation { from { -moz-transform: scale(1) translate(100%); } to { -moz-transform: scale(1) translate(-65%); } } @-o-keyframes cssAnimation { from { -o-transform: scale(1) translate(100%); } to { -o-transform: scale(1) translate(-65%); } } @keyframes cssAnimation { from { transform: scale(1) translate(100%); } to { transform: scale(1) translate(-65%); } }

  • between 0.5s and ease put infinite - user33274

1 answer 1

 -webkit-animation-fill-mode: forwards;

This line solved the problem of returning to the initial state.

And on safari, the problem was solved by stretching