JSFiddle - React, Tailwind, and code Playground

by mkerny45

HTML

<div class="fade-in one">Hello World</div>

CSS

div {
    background-color: red;
    width: 250px;
    height: 250px;
}

// Animations
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { 
    opacity: 0; 
    -webkit-animation: fadeIn ease-in 1; 
    -moz-animation: fadeIn ease-in 1; 
    animation: fadeIn ease-in 1; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    -webkit-animation-duration: .5s; 
    -moz-animation-duration: .5s; 
    animation-duration: .5s;
}
.fade-in.one { 
    -webkit-animation-delay: 0.5s; 
    -moz-animation-delay: 0.5s; 
    animation-delay: 0.5s;
}
.fade-in.two { 
    -webkit-animation-delay: 1.2s; 
    -moz-animation-delay: 1.2s; 
    animation-delay: 1.2s;
}