JSFiddle - React, Tailwind, and code Playground

HTML

<body>



        <div class="bubblingG">
        <span id="bubblingG_1">
        </span>
        <span id="bubblingG_2">
        </span>
        <span id="bubblingG_3">
        </span>
        </div>




        <iframe src="http://fishki.net" style="width: 1000px; height: 400px;"></iframe>

    </body>
</html>

CSS

.bubblingG {
text-align: center;
width:500px;
height:313px;
}

.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 63px;
height: 63px;
margin: 156px auto;
background: #ed1c24;
-moz-border-radius: 313px;
-moz-animation: bubblingG 1.3s infinite alternate;
-webkit-border-radius: 313px;
-webkit-animation: bubblingG 1.3s infinite alternate;
-ms-border-radius: 313px;
-ms-animation: bubblingG 1.3s infinite alternate;
-o-border-radius: 313px;
-o-animation: bubblingG 1.3s infinite alternate;
border-radius: 313px;
animation: bubblingG 1.3s infinite alternate;
}

#bubblingG_1 {
-moz-animation-delay: 0.78s;
-webkit-animation-delay: 0.78s;
-ms-animation-delay: 0.78s;
-o-animation-delay: 0.78s;
animation-delay: 0.78s;
}

#bubblingG_2 {
-moz-animation-delay: 0.39s;
-webkit-animation-delay: 0.39s;
-ms-animation-delay: 0.39s;
-o-animation-delay: 0.39s;
animation-delay: 0.39s;
}

#bubblingG_3 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}

@-moz-keyframes bubblingG {
0% {
width: 63px;
height: 63px;
background-color:#ed1c24;
-moz-transform: translateY(0);
}

100% {
width: 150px;
height: 150px;
background-color:#FFFFFF;
-moz-transform: translateY(-131px);
}

}

@-webkit-keyframes bubblingG {
0% {
width: 63px;
height: 63px;
background-color:#ed1c24;
-webkit-transform: translateY(0);
}

100% {
width: 150px;
height: 150px;
background-color:#FFFFFF;
-webkit-transform: translateY(-131px);
}

}

@-ms-keyframes bubblingG {
0% {
width: 63px;
height: 63px;
background-color:#ed1c24;
-ms-transform: translateY(0);
}

100% {
width: 150px;
height: 150px;
background-color:#FFFFFF;
-ms-transform: translateY(-131px);
}

}

@-o-keyframes bubblingG {
0% {
width: 63px;
height: 63px;
background-color:#ed1c24;
-o-transform: translateY(0);
}

100% {
width: 150px;
height: 150px;
background-color:#FFFFFF;
-o-transform: translateY(-131px);
}

}

@keyframes bubblingG {
0% {
width: 63px;
height:...