JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<span class="original">original</span>
<span class="delayed">delayed</span>

CSS

@-webkit-keyframes fade {
    0% { opacity: 0; -webkit-transform: rotate(0deg);}
    20% { opacity: 1; -webkit-transform: rotate(360deg);}
    100% { opacity: 0; -webkit-transform: rotate(360deg);}
}

@-webkit-keyframes fadeDelay {
    0% { opacity: 0; -webkit-transform: rotate(0deg);}
    10% { opacity: 1; -webkit-transform: rotate(360deg);}
    50% { opacity: 0; -webkit-transform: rotate(360deg);}
    100% { opacity: 0; -webkit-transform: rotate(360deg);}
}

@keyframes fade {
    0% { opacity: 0; transform: rotate(0deg);}
    20% { opacity: 1; transform: rotate(360deg);}
    100% { opacity: 0; transform: rotate(360deg);}
}

@keyframes fadeDelay {
    0% { opacity: 0; transform: rotate(0deg);}
    10% { opacity: 1; transform: rotate(360deg);}
    50% { opacity: 0; transform: rotate(360deg);}
    100% { opacity: 0; transform: rotate(360deg);}
}

.original {
    -webkit-animation: fade 3s ease-in-out infinite;   
    animation: fade 3s ease-in-out infinite;   
}
.delayed {
    -webkit-animation: fadeDelay 6s ease-in-out infinite;   
    animation: fadeDelay 6s ease-in-out infinite;   
}
span {
    display: inline-block;
}