JSFiddle - React, Tailwind, and code Playground
by Maulik Anand
HTML
<div class="balloon-cage2">
<div class="balloon-blue-l">bl</div>
<div class="balloon-green-r">gr</div>
<div class="balloon-green-l">gl</div>
<div class="balloon-blue-r">br</div>
</div>
CSS
.balloon-cage2{
display:block;
position:relative;
left:400px;
}
.balloon-green-r{
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr 6s linear infinite;
-moz-animation: rotateyr 6s linear infinite;
animation: rotateyr 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-green-l{
background: url("http://doggydish.com/PROJECTS/balloon-green-l.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl 6s linear infinite;
-moz-animation: rotateyl 6s linear infinite;
animation: rotateyl 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-l{
background: url("http://doggydish.com/PROJECTS/balloon-blue-l.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl2 6s linear infinite;
-moz-animation: rotateyl2 6s linear infinite;
animation: rotateyl2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-r{
background: url("http://doggydish.com/PROJECTS/balloon-blue-r.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr2 6s linear infinite;
-moz-animation: rotateyr2 6s linear infinite;
animation: rotateyr2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
@-webkit-keyframes rotateyr {
0% {-webkit-transform: rotatey(0deg); -webkit-transform-origin: 50% 0% 0;}
100% {-webkit-transform: rotatey(360deg); -webkit-transform-origin: 50% 0%...