Sea waves

dabblet.css

/**
 * Sea waves
 */

#sky {
	width: 100%;
	height: 600px;
	position: fixed; }

#sea {
	width: 120%;
	height: 100px;
	position: fixed;
	top: 200px;
	background: 
  		/*radial-gradient(50% 100%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),*/
  		radial-gradient(50% 0%, circle, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 15%) 0 0px;
	background-color: slategray;
	background-size:60px 100px;
	animation: waves 2s ease-out, sideways 4s ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate; }

@keyframes waves {
	0% {     background-size: 50px 150px;
    }
	100% {     background-size: 50px 90px;
    }
}

@keyframes sideways {

    0% { left: 20px; }
    100% { left: -20px; }
    /*100% { left: 20px; }*/
    
}

dabblet.html

<div id="sea"></div>
<div id="sky"></div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}