JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Les fonctions d'accélération</h2>
<div id="vdo-6">
    <div>.</div>
    <div>.</div>
    <div>.</div>
    <div>.</div>
    <div>.</div>
    <div>.</div>
</div>

CSS

body{
    padding: 70px;
    font: 1em sans-serif;
}
h2{
    font-size: 1.6em;
}

#vdo-6 div{
    font-size: 20px;
    text-align: center;
    width: 1px;
    height: 1px;
    line-height: 1px;
    white-space: nowrap;
    background: black;
    -webkit-transition:  margin-left 5s ease-in-out;
       -moz-transition: margin-left 5s ease-in-out;
         -o-transition: margin-left 5s ease-in-out;
            transition: margin-left 5s ease-in-out;
}
#vdo-6.anim div{
    margin-left: 400px;
}
#vdo-6 div:nth-child(2){
    -webkit-transition-timing-function: ease;
       -moz-transition-timing-function: ease;
         -o-transition-timing-function: ease;
            transition-timing-function: ease;
}
#vdo-6 div:nth-child(3){
    -webkit-transition-timing-function: ease-in;
       -moz-transition-timing-function: ease-in;
         -o-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
}
#vdo-6 div:nth-child(4){
    -webkit-transition-timing-function: ease-out;
       -moz-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
#vdo-6 div:nth-child(5){
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}

JavaScript

$(function(){

    $('[id^=vdo]').click(function(e){
        $(this).toggleClass('anim');                
    });

});