JSFiddle - React, Tailwind, and code Playground

HTML

<h2>La fonction <code>cubic-bezier()</code></h2>
<div id="vdo-7">
    Cliquez-moi!
    <div>cubic-bezier</div>
    <p>
    test
    </p>
    <div>cubic-bezier</div>
</div>

CSS

body{
    padding: 70px;
    font: 1em sans-serif;
}
h2{
    font-size: 1.6em;
}
#vdo-7{
    font-size: 1.3em;
    width: 500px;
    margin-top: 30px;
    background: #eee;
    text-align: center;
}
#vdo-7 div{
    font-size: .7em;
    text-align: center;
    width: 100px;
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
    background: deepskyblue;
    -webkit-transition: margin-left 5s linear;
       -moz-transition: margin-left 5s linear;
         -o-transition: margin-left 5s linear;
            transition: margin-left 5s linear;
}
#vdo-7.anim div{
    margin-left: 400px;
}
#vdo-7 div:first-child{
    -webkit-transition-timing-function: cubic-bezier( .5, 1, .5, .8);
       -moz-transition-timing-function: cubic-bezier( .5, 1, .5, .8);
         -o-transition-timing-function: cubic-bezier( .5, 1, .5, .8);
            transition-timing-function: cubic-bezier( .5, 1, .5, .8);
}
#vdo-7 div:last-child{
    -webkit-transition-timing-function: cubic-bezier( .5, 2, .5, .8);
       -moz-transition-timing-function: cubic-bezier( .5, 2, .5, .8);
         -o-transition-timing-function: cubic-bezier( .5, 2, .5, .8);
            transition-timing-function: cubic-bezier( .5, 2, .5, .8);
}

JavaScript

$(function(){

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

});