animation-direction

https://webref.ru/css/animation-direction

by fersterin

HTML

<div class="box normal">normal</div>
  <div class="box alternate">alternate</div>
  <div class="box reverse">reverse</div>
  <div class="box alternate-reverse">alternate-reverse</div>
 <button onclick="red();">Старт анимации</button>

CSS

.box {
    background: #fc0;
    width: 100px;
    padding: 20px 0;	
    text-align: center;
    position: absolute;
    animation: move 5s infinite;
    animation-play-state: paused;
   }
   .normal {
    animation-direction: normal;
    background-color: #e4efc7;
   }
   .alternate {
    top: 100px;
    animation-direction: alternate;
    background-color: #fee7dc;
   }
   .reverse {
    top: 200px;
    animation-direction: reverse;
    background-color: #c8eaf5;
   }
   .alternate-reverse {
    top: 300px;
    animation-direction: alternate-reverse;
    background-color: #ffead0;
   }
   @keyframes move {
    from { left: 0; }
    to { left: 100%; transform: translateX(-100px); }
   }
  button {
    position: relative;
    top: 400px;
  }

JavaScript

function red(){
	var x = document.getElementsByClassName("box")[0].setAttribute("style","animation-play-state:running");
  var x = document.getElementsByClassName("box")[1].setAttribute("style","animation-play-state:running");
  var x = document.getElementsByClassName("box")[2].setAttribute("style","animation-play-state:running");
  var x = document.getElementsByClassName("box")[3].setAttribute("style","animation-play-state:running");
}