JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click anywhere to move the ball</p>
<div id="foo"></div>

CSS

p{padding-left:60px;}
#foo{
  display: block; /* <---- Вот так!!! */
border-radius:50px;
width:50px;
height:50px;
background:#c00;
position:absolute;
top:0;
left:0;
-moz-transition: transform 1s; 
-webkit-transition: transform 1s;  
-ms-transition: transform 1s;  
-o-transition: transform 1s;  
transition: transform 1s,opacity 2s;  
}
.hide {
  display: none;
}

JavaScript

var f = document.getElementById('foo');
  
f.style.opacity = 0;

setTimeout(function(){f.classList.add('hide');}, 3000);
setTimeout(function(){f.classList.remove('hide');f.style.opacity = 1;}, 3000);