JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>

CSS

body {
    background-color: black;
}

.windows8 {
    position: relative;
    width: 24px;
    height:24px;
}

.windows8 .wBall {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 4.95s infinite;
}

.windows8 .wBall .wInnerBall{
    position: absolute;
    width: 16%;
    height: 16%;
    background: #FFFFFF;
    left:0px;
    top:0px;
    -webkit-border-radius: 100%;
}

.windows8 #wBall_1 {
-webkit-animation-delay: 1.08s;
}

.windows8 #wBall_2 {
-webkit-animation-delay: 0.22s;
}

.windows8 #wBall_3 {
-webkit-animation-delay: 0.43s;
}

.windows8 #wBall_4 {
-webkit-animation-delay: 0.65s;
}

.windows8 #wBall_5 {
-webkit-animation-delay: 0.86s;
}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}