JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div></div>
</div>

CSS

div.box{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 50px auto;
    position: relative;
    animation: a 2s;
}
div.box div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    animation: b 1s infinite;
}
@keyframes a {
    from {
        transform: translateY(300px)
    }
    100% {
        transform: translateY(0px)
    }
}
@keyframes b {
    50% {
        transform: translateY(-20px)
    }
    100% {
        transform: translateY(0px)
    }
}