JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div id="ripples"></div>

CSS

body{
    background-color:#333;
    width:100%;
    height:600px:
}
#ripples{
   position: absolute;
    top: -415px;
    padding: 0 562px;
    margin-left: -622px;
    width: 100%;
    height: 1124px;
    z-index: -1;
    background-image: url("http://nouncy.com/img/ripples.png");
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-animation: emit 20s cubic-bezier(.215,.61,.355,1)2s infinite,fade 20s ease-out 2s infinite;
    -moz-animation: emit 20s cubic-bezier(.215,.61,.355,1)2s infinite,fade 20s ease-out 2s infinite;
    -o-animation: emit 20s cubic-bezier(.215,.61,.355,1)2s infinite,fade 20s ease-out 2s infinite;
    -ms-animation: emit 20s cubic-bezier(.215,.61,.355,1)2s infinite,fade 20s ease-out 2s infinite;
    animation: emit 20s cubic-bezier(.215,.61,.355,1)2s infinite,fade 20s ease-out 2s infinite;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    -ms-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}