<div class="transition-timing-function js-boxs">

    <p class="text">normal</p>

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

​

    <p class="text">reverse</p>

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

​

    <p class="text">alternate</p>

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

​

    <p class="text">alternate-reverse</p>

    <div class="box alternate-reverse"></div>

</div>

​

<button class="js-button button">start</button>

.box {

    background-color: #3381ca;

    width: 20px;

    height: 20px;

    margin: 0;

}

​

.is-animation .box {

    animation-name: sampleAnimation;

    animation-duration: 3s;

    animation-iteration-count: 4;

}

​

.is-animation .normal {

    animation-direction: normal;

}

​

.is-animation .reverse {

    animation-direction: reverse;

}

​

.is-animation .alternate {

    animation-direction: alternate;

}

​

.is-animation .alternate-reverse {

    animation-direction: alternate-reverse;

}

​

@keyframes sampleAnimation {

    from {

        transform: translateX(0);

    }

​

    to {

        transform: translateX(200px);

    }

}

​

​

.text{

  font-size: 12px;

  margin: 4px 0 0 0;

  padding: 0;

}

​

.button{

  margin-top: 8px;

}

​

body{

  margin: 0 12px 0;

}

const boxs = document.querySelector(".js-boxs");

const button = document.querySelector(".js-button");

button.addEventListener('click', () => boxs.classList.toggle("is-animation"));