JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<div style = "margin-left: 10px">

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f1">

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f2">

</div>

CSS

.float {
  position: absolute;
  opacity: 0;}
@keyframes floatBubble {
  0% {top:-100px; opacity: 1;}
  100% {top: 0px; opacity: 1;}}
  
#f1 {animation: floatBubble 0.5s linear 0.5s forwards; left:0px;  z-index:1}
#f2 {animation: floatBubble 0.5s linear 0.8s forwards; left:48px; z-index:0}