JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div id="landing">Text</div>

CSS

#landing {
    position: relative;
    border: 1px solid #666;
    height: 10em;
}

#landing::before, #landing::after {
    opacity: 1;
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-size: contain;
}

#landing::before {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Rear.svg) no-repeat center;
}

#landing::after {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Along_Wave.svg) no-repeat center;
    -webkit-animation: fadeWithDelay 2s infinite linear alternate;
    animation: fadeWithDelay 2s infinite linear alternate;
} 

@-webkit-keyframes fadeWithDelay {
    0% {opacity: 1;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}   
}
@keyframes fadeWithDelay {
    0% {opacity: 1;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}   
}