JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">

      <center>
      
      <h1>
      <span id="steps">Welcome Back</span>
      </h1>
      
      <div class="circle upDown" id="circle1"></div>
      </center>

    </div>

CSS

.circle {
	border-radius: 50%;
	display: inline-block;
	margin-right: 20px;
}
		
#circle1 {
	width: 200px;
	height: 200px;
   background: blue;
   -webkit-animation: upDown 5s infinite;  /* Safari and Chrome */
    animation: upDown 5s infinite;
}

/* Safari and Chrome */
@-webkit-keyframes upDown {
    0% {margin-top: 0px;}
    50% {margin-top: 300px;}
    100% {margin-top: 0px;}
}

@keyframes upDown {
    from {margin-top: 0px;}
    to {margin-top: 300px;}
}

JavaScript

document.getElementById('circle1').style.webkitAnimationDuration = '40s';
// The above line has no effect but if the animation lines within #circle1 are removed it does have an effect
// I'd like to modify this so I can change the speed several times well this runs via Javascript