JSFiddle - React, Tailwind, and code Playground
HTML
<div id="holder">
<div id="box">
<div class="ball" style="left:20px;top:10px"></div>
<div class="ball" style="right:40px;bottom:40px"></div>
<div class="ball" style="left:60px;bottom:10px"></div>
<div class="ball" style="left:100px;top:50px"></div>
<div class="ball" style="right:90px;bottom:60px"></div>
<div class="ball" style="left:150px;top:80px"></div>
<div class="ball" style="right:20px;top:10px"></div>
</div>
<div class="ballbig" style="right:272px;top:100px"></div>
</div>
CSS
#box {
width: 300px;
height: 300px;
position: relative;
margin: auto;
margin-top: 100px;
animation:mymove 2s infinite;
/* Firefox */
-moz-animation:mymove 2s infinite;
/* Safari and Chrome */
-webkit-animation:mymove 2s infinite;
animation-timing-function:linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}
.ball {
width: 30px;
height: 30px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
background-color: blue;
position: absolute;
}
.ballbig {
transform: scale(0.25);
-moz-transform: scale(0.25);
-webkit-transform: scale(0.25);
width: 240px;
height: 240px;
-moz-border-radius:300px;
-webkit-border-radius: 300px;
border-radius: 300px;
background-color: red;
position: absolute;
margin: auto;
margin-top: -70px;
left: 180px;
transition:all .6s;
/* Firefox */
-moz-transition:all .6s;
/* Safari and Chrome */
-webkit-transition:all .6s;
}
.ballbig:hover {
transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
background: orange;
}
#holder {
width: 600px;
height: 600px;
position: relative;
margin: auto;
margin-top: 100px;
}
@keyframes mymove
{
...