<main>
  <h2>CSS Animations: the <code>animation-fill-mode</code> Property</h2>

  <p>Use the select box below to see the behaviour using different fill mode values. You can also adjust delay, direction, and iterations, which helps to understand fill mode.</p>

  <div class="box">
  </div>

  Fill Mode: <select id="fillmode">
    <option value="none">none</option>
    <option value="forwards">forwards</option>
    <option value="backwards">backwards</option>
    <option value="both">both</option>
  </select>
  
  Delay: <input id="delay" type="number" value="1" step="0.1"><br><br>
  
  Direction: <select id="direction">
    <option value="normal">normal</option>
    <option value="reverse">reverse</option>
    <option value="alternate">alternate</option>
    <option value="alternate-reverse">alternate-reverse</option>
  </select>

  Iterations: <input id="iteration" type="number" value="2" step="0.1">

  <br>

  <button>Animate the Box</button> <button disabled>Reset</button>

</main>
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  padding: 0 20px;
}

code {
  color: firebrick;
}

.box {
  width: 100px;
  height: 100px;
  background: lightyellow;
  border: solid 2px;
  margin-bottom: 20px;
}

.box-animate {
  animation-name: moveObject;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes moveObject {
  from {
    transform: translateX(0);
    background: red;
  }

  to {
    transform: translateX(600px);
  }
}

input[type=number] {
  width: 60px;
}

button {
  margin-top: 20px;
}
console.clear();

let myObject = document.querySelector('.box'),
    btn1 = document.querySelector('button'),
    btn2 = document.querySelectorAll('button')[1],
    fillmode = document.querySelector('#fillmode'),
    delay = document.querySelector('#delay'),
    iteration = document.querySelector('#iteration'),
    direction = document.querySelector('#direction');

btn1.addEventListener('click', function () {
  myObject.classList.add('box-animate');
  myObject.style.animationFillMode = fillmode.value;
  myObject.style.animationDelay = delay.value + 's';
  myObject.style.animationIterationCount = iteration.value;
  myObject.style.animationDirection = direction.value;
  this.disabled = true;
  btn2.disabled = false;
}, false);

btn2.addEventListener('click', function () {
  myObject.classList.remove('box-animate');
  this.disabled = true;
  btn1.disabled = false;
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.