<div class="content">
    <div class="buttons">
        <button class="button" onclick="normal()">normal</button>
  <button class="button" onclick="reverse()">reverse</button>  
    <button class="button" onclick="alternate()">alternate</button>  
    <button class="button" onclick="alternateReverse()">alternate-reverse</button>  
  </div>
  
<div id="square" class="square"></div>
  <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
</div>
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.content {
  position: relative;
}

.square {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #2a9d8f;
  z-index:1;
  animation: move 4s infinite;
  animation-direction: normal;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}

.buttons {
  left:-200px;
  top:-70px;
  position: absolute;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 100px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

.col {
  position: absolute;
  font-weight: bold;
  font-size:15px;
  width: 250px;
  left:-200px;
  top:90px;
}
function normal() { document.getElementById("square").style.animationDirection="normal" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "animation-direction: normal;") {
    x.innerHTML = "animation-direction: normal;";
  } else {
    x.innerHTML = "animation-direction: normal;";
  }
}

function reverse() { document.getElementById("square").style.animationDirection="reverse" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "animation-direction: reverse;") {
    x.innerHTML = "animation-direction: reverse;";
  } else {
    x.innerHTML = "animation-direction: reverse;";
  }
}

function alternate() { document.getElementById("square").style.animationDirection="alternate" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "animation-direction: alternate;") {
    x.innerHTML = "animation-direction: alternate;";
  } else {
    x.innerHTML = "animation-direction: alternate;";
  }
}

function alternateReverse() { document.getElementById("square").style.animationDirection="alternate-reverse" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "animation-direction: alternate-reverse;") {
    x.innerHTML = "animation-direction: alternate-reverse;";
  } else {
    x.innerHTML = "animation-direction: alternate-reverse;";
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.