JSFiddle - React, Tailwind, and code Playground

lvfiddler · JSFiddle ·

2 min read Original article ↗

by lvfiddler

HTML

<div class="outer"><div class="inner2"></div><div class="inner"></div></div>
<div class="outer delay2"><div class="inner2"></div><div class="inner"></div></div>
<div class="outer delay3"><div class="inner2"></div><div class="inner"></div></div>
<div class="outer"><div class="inner2"></div><div class="inner"></div></div>
<div class="outer delay1"><div class="inner2"></div><div class="inner"></div></div>
<div class="outer delay2"><div class="inner2"></div><div class="inner"></div></div>

CSS

body{
    background-color:#eee;
}


.outer{
    float:left;
    margin:20px;
    width:50px;
    height:50px;
    position:relative;
    background-color:#ff0;
            border-radius: 35px;
       -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
            animation: outer-anim 1s infinite;
       -moz-animation: outer-anim-moz 1s infinite;
    -webkit-animation: outer-anim-webkit 1s infinite;
    z-index:0;
}
.inner{
    position:absolute;
            animation: inner-anim 1s infinite;
       -moz-animation: inner-anim-moz 1s infinite;
    -webkit-animation: inner-anim-webkit 1s infinite;
    z-index:2;
}
.inner2{  
    position:absolute;
            animation: inner2-anim 1s infinite;
       -moz-animation: inner2-anim-moz 1s infinite;
    -webkit-animation: inner2-anim-webkit 1s infinite;
             animation-timing-function: linear;
        -moz-animation-timing-function: linear;
     -webkit-animation-timing-function: linear;
    z-index:1;
}

.delay1, .delay1 .inner, .delay1 .inner2{
    -webkit-animation-delay:0.25s;
       -moz-animation-delay:0.25s;
            animation-delay:0.25s;
}
.delay2, .delay2 .inner, .delay2 .inner2{
    -webkit-animation-delay:0.5s;
       -moz-animation-delay:0.5s;
            animation-delay:0.5s;
}
.delay3, .delay3 .inner, .delay3 .inner2{
    -webkit-animation-delay:0.75s;
       -moz-animation-delay:0.75s;
            animation-delay:0.75s;
}
.delay4, .delay4 .inner, .delay4 .inner2{
    -webkit-animation-delay:1s;
       -moz-animation-delay:1s;
            animation-delay:1s;
}
.delay5, .delay5 .inner, .delay5 .inner2{
    -webkit-animation-delay:1.25s;
       -moz-animation-delay:1.25s;
            animation-delay:1.25s;
}


@-moz-keyframes inner-anim-moz {
    0%     { width: 25px; height: 50px; top:    0; right:    0; -moz-border-radius:0 100px 100px 0; background-color:#ff0; -moz-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);}
    12.99% { width:    0; height: 50px; top:    0; right: 25px;...