JSFiddle - React, Tailwind, and code Playground
HTML
<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='screen'><div class="bola-mj">
<span id="bola_1">
</span>
<span id="bola_2">
</span>
<span id="bola_3">
</span>
</div>
</div>
CSS
#screen {
z-index:999999;
background:#000;
width:100%;
height:100%;
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
text-shadow:none;
}
.bola-mj {
text-align:center;
width:100px;
height:63px;
margin:10% auto;
}
.bola-mj span {
display:inline-block;
vertical-align:middle;
width:13px;
height:13px;
margin:31px auto;
background:#ddd;
-moz-border-radius:63px;
-moz-animation:bola 0.4s infinite alternate;
-webkit-border-radius:63px;
-webkit-animation:bola 0.4s infinite alternate;
-ms-border-radius:63px;
-ms-animation:bola 0.4s infinite alternate;
-o-border-radius:63px;
-o-animation:bola 0.4s infinite alternate;
border-radius:63px;
animation:bola 0.4s infinite alternate;
}
#bola_1 {
-moz-animation-delay:0s;
-webkit-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
#bola_2 {
-moz-animation-delay:0.15s;
-webkit-animation-delay:0.15s;
-ms-animation-delay:0.15s;
-o-animation-delay:0.15s;
animation-delay:0.15s;
}
#bola_3 {
-moz-animation-delay:0.30s;
-webkit-animation-delay:0.30s;
-ms-animation-delay:0.30s;
-o-animation-delay:0.30s;
animation-delay:0.30s;
}
@-moz-keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
-moz-transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold;
-moz-transform:translateY(-26px);
}
}
@-webkit-keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
-webkit-transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold;
-webkit-transform:translateY(-26px);
}
}
@-ms-keyframes bola {
0% {
width:13px;
height:13px;
background-color:#0F83A0;
-ms-transform:translateY(0);
}
100% {
width:30px;
height:30px;
background-color:gold;
-ms-transform:translateY(-26px);
}
}
@-o-keyframes bola {
0%...