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

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

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

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

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

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

    <div class="box ease-in"></div>

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

    <div class="box ease-out"></div>

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

    <div class="box ease-in-out"></div>

    <p class="text">cubic-bezier(0.46, -0.57, 0.6, 1.57)</p>

    <div class="box cubic-bezier"></div>

    <p class="text">steps(4, end)</p>

    <div class="box step-end"></div>

</div>

​

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

​

.box {

    background-color: #3381ca;

    width: 50px;

    height: 16px;

    margin: 0;

}

​

.is-animation .box {

    transform: scaleX(4);

    transform-origin: top left;

    transition-property: transform;

    transition-duration: 2s;

}

​

.is-animation .ease {

    transition-timing-function: ease;

}

​

.is-animation .linear {

    transition-timing-function: linear;

}

​

.is-animation .ease-in {

    transition-timing-function: ease-in;

}

​

.is-animation .ease-out {

    transition-timing-function: ease-out;

}

​

.is-animation .ease-in-out {

    transition-timing-function: ease-in-out;

}

​

.is-animation .cubic-bezier {

    transition-timing-function: cubic-bezier(0.46, -0.57, 0.6, 1.57);

}

​

.is-animation .step-end {

    transition-timing-function: steps(4, end);

}

​

.text{

  font-size: 12px;

  margin: 4px 0 0 0;

  padding: 0;

}

​

.button{

  margin-top: 8px;

}

​

body{

  margin: 0 12px 0;

}

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

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

​

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