Pure CSS wave effect *

dabblet.css

/** Pure CSS wave effect **/
div.wave{
	position: relative;
	width: 100%;
}
div.wave > span{
	float: left;
	width: 10%;
	height: 200px;
	animation: animate 1.5s ease-in-out alternate infinite;
}
div.wave > span:nth-child(1){
	background-color: #B58900;	
}
div.wave > span:nth-child(2){
	background-color: #F7877C;
	animation-delay: .2s;
}
div.wave > span:nth-child(3){
	background-color: #0E7DA8;
	animation-delay: .4s;
}
div.wave > span:nth-child(4){
	background-color: #C4EADF;
	animation-delay: .6s;
}
div.wave > span:nth-child(5){
	background-color: #B4A4CB;
	animation-delay: .8s;
}
div.wave > span:nth-child(6){
	background-color: #FBD92F;
	animation-delay: 1s;
}
div.wave > span:nth-child(7){
	background-color: #268BD2;
	animation-delay: 1.2s;
}
div.wave > span:nth-child(8){
	background-color: #859900;
	animation-delay: 1.4s;
}
div.wave > span:nth-child(9){
	background-color: #BBFFFF;
	animation-delay: 1.6s;
}
div.wave > span:nth-child(10){
	background-color: #FFE8E8;
	animation-delay: 1.8s;
}
@keyframes animate{
	to { height: 100px; }
}

dabblet.html

<div class='wave'>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}