JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://modernizr.com/downloads/modernizr.js"></script>
<h2>animation-fill-mode</h2>
<div id="vdo-9">
    <div>
        <div>Cas 1<br/>none</div>
    </div>
    <div>
        <div>Cas 2<br/>backwards</div>
    </div>
    <div>
        <div>Cas 3<br/>forwards</div>
    </div>
    <div>
        <div>Cas 4<br/>both</div>
    </div>
</div>

CSS

body{
    padding: 70px;
    font: 1em sans-serif;
}
h2{
    font-size: 1.6em;
}
#vdo-9{
    display: table;
    table-layout: fixed;
    border-spacing: 3px;
    margin-top: 30px;
}
#vdo-9 > div{
    display: table-cell;
    width: 200px;
    height: 200px;
    margin: 30px auto;
    background: #eee;
    overflow: hidden;
    text-align:center;
}
#vdo-9 > div div {
    width: 100px;
    height:100px;
    margin: auto;
    background: deepskyblue;
    position: relative;
    top: 50px;
    -webkit-animation: hop 2s forwards 1s;
       -moz-animation: hop 2s forwards 1s;
         -o-animation: hop 2s forwards 1s;
            animation: hop 2s forwards 1s;
}
#vdo-9 > div:nth-child(2) div{
    -webkit-animation: hop 2s forwards 1s;
       -moz-animation: hop 2s forwards 1s;
         -o-animation: hop 2s forwards 1s;
            animation: hop 2s forwards 1s;
}
#vdo-9 > div:nth-child(3) div{
    -webkit-animation: hop 2s forwards 1s;
       -moz-animation: hop 2s forwards 1s;
         -o-animation: hop 2s forwards 1s;
            animation: hop 2s forwards 1s;
}
#vdo-9 > div:nth-child(4) div{
    -webkit-animation: hop 2s forwards 1s;
       -moz-animation: hop 2s forwards 1s;
         -o-animation: hop 2s forwards 1s;
            animation: hop 2s forwards 1s;
}


@-webkit-keyframes hop{
    from{top: 0;-webkit-animation-timing-function: ease-in;}
    30%{top: 40px;-webkit-animation-timing-function: ease-in;}
    50%{top: 60px;-webkit-animation-timing-function: ease-in;}
    70%{top: 80px;-webkit-animation-timing-function: ease-in;}
    90%{top: 90px;-webkit-animation-timing-function: ease-in;}
    to,20%,40%,60%,80% {top: 100px;-webkit-animation-timing-function: ease-out;}
}
@-moz-keyframes hop{
    from{top: 0;-moz-animation-timing-function: ease-in;}
    30%{top: 40px;-moz-animation-timing-function: ease-in;}
    50%{top: 60px;-moz-animation-timing-function: ease-in;}
    70%{top: 80px;-moz-animation-timing-function: ease-in;}
    90%{top:...