​

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

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

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

​

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

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

​

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

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

​

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

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

</div>

​

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

.box {

    background-color: #000;

    width: 30px;

    height: 30px;

    margin: 0;

}

​

.is-animation .box {

    animation-name: sampleAnimation;

    animation-duration: 3s;

    animation-delay: 3s;

}

​

.is-animation .none {

    animation-fill-mode: none;

}

​

.is-animation .forwards {

    animation-fill-mode: forwards;

}

​

.is-animation .backwards {

    animation-fill-mode: backwards;

}

​

.is-animation .both {

    animation-fill-mode: both;

}

​

@keyframes sampleAnimation {

    0% {

        background-color: red;

    }

​

    50% {

        background-color: blue;

    }

​

    100% {

        background-color: green;

    }

}

​

.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"));