JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div class="circle_wrap">
            <h1>Hello<span>world</span>!</h1>
            <div class="hat " id="animation_c"></div>
            <div class="dp_circle " id="animation_a"></div>
            <div class="p_circle " id="animation_b"></div>
            <div class="lp_circle " id="animation_c"></div>
            </div>

CSS

@-webkit-keyframes mymove {
    0% {top: 0px;}
    50% {top: 200px;}
    100% {top: 0px;}
} 

#animation_a{
  position:relative;
  width:50px;
  height:50px;
  background:red;
  border-radius:100%;
}

JavaScript

document.body.onload = function(){

    document.getElementById('animation_a').style.animation = "mymove 5s infinite";

}