JSFiddle - React, Tailwind, and code Playground

by kitsunde

HTML

<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.js"></script>

<div class="canvas">
    <div id="blue"></div>
</div>

CSS

.canvas{
    width: 40px;
    height: 40px;
    position: relative;
    border: 1px solid #000;
}

.canvas > div{
    position: absolute;
    width: 100%;
    height: 100%;
}

#blue{
    background: blue;
}

JavaScript

var animation1 = new Animation(
    document.querySelector(".canvas #blue"),
    [
        {transform: "translate(0,0)"},
        {transform: "translate(0,-100%)"}
    ], {duration: 2000});

var player = document.timeline.play(animation1);
player.reverse();
player.play();