JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box"></div>
CSS
@keyframes box-animation {
50% {
width: 5vw;
}
100% {
transform: translate(20vw, 20vh);
width: 50vw;
height: 50vw;
background-color: red;
}
}
.box {
transform: translate(0, 0);
width: 20vw;
height: 20vw;
background-color: #55aa88;
animation-name: box-animation;
animation-duration: 5s;
}