JSFiddle - React, Tailwind, and code Playground

by g30rg3

HTML

<div id="container">
    <div class="image red mover"></div>
    <div class="image blue"></div>
    <div class="image green"></div>
</div>

CSS

@keyframes example {
    0% {
        top: 0px;
    }
    50% {
        top: 20px;
    }
    100% {
        top:100px;
    }
}
#container {
    width: 150px;
    height: 75px;
    border: thin solid black;
    padding: 12.5px 25px;
}
.image {
    position:relative;
    width: 150px;
    height: 75px;
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
.mover {
    webkit-animation-name: example;
    webkit-animation-duration: 4s;
    webkit-animation-delay: 2s;
    webkit-animation-iteration-count: 3;
}