Tidal wave using CSS3

Wave animation simulation using transformation of border-width and position. Currently can be run in all CSS3 compatible browsers. Author Marek Králík @ Image Design

HTML

<div class="show">
<h1>Tidal wave using CSS3 animation</h1>
<p>Wave animation simulation using transformation of border-width and position.</p>
    <p>Currently can be run in all <strong>CSS3 compatible browsers</strong>.</p>
    <p class="hue"><small>Author <a href="http://profile.idesigned.cz/marakoss">Marek Králík</a> @ <a href="http://www.idesigned.cz/">Image Design</a></small></p>
<div id="canvas" class="hue">
    <div class="item" id="a"></div>
    <div class="item" id="b"></div>
    <div class="item" id="c"></div>
    <div class="item" id="d"></div>
    <div class="item" id="e"></div>
    <div class="item" id="f"></div>
    <p class="loading">loading bar</p>
</div>
</div>

CSS

body,html{
    padding: 0;
    margin:0;
    height: 100%;
}



#canvas{
    width: 400px;
    height: 400px;
    background: #01b49d;
    position: relative;
    margin: 50px 0 0 0;
    overflow: hidden;
}

.item{

    opacity: 0.2;
/*    width: 100%;
    height: 100%;
*/
    position: absolute;
    left:101%;
    width:100%
}

#a, #b, #c, #d, #e, #f{
    margin-left: -20px;
    border-top: 200px solid transparent;
	border-right: 20px solid white;
	border-bottom: 200px solid transparent;
    -webkit-animation: changepos 6s infinite, changeangle 2s infinite, changesize 1.7s infinite;
	animation: changepos 6s infinite, changeangle 2s infinite, changesize 1.7s infinite;
}

#a{    

}

#b{
    -webkit-animation-delay: -1.3s;
	animation-delay: -1.3s;
}

#c{
    -webkit-animation-delay: -2.2s;
	animation-delay: -2.2s;
}

#d{
    -webkit-animation-delay: -3.9s;
	animation-delay: -3.9s;
}

#e{
    -webkit-animation-delay: -4.3s;
	animation-delay: -4.3s;
}

#f{
    -webkit-animation-delay: -5.7s;
	animation-delay: -5.7s;
}

@-webkit-keyframes changepos {
    0% {top: -300px;}
    50% {top: 300px;}    
    100% {top: -300px;}
}
@keyframes changepos {
    0% {top: -300px;}
    50% {top: 300px;}    
    100% {top: -300px;}
} 

@-webkit-keyframes changeangle {
    0% {
        border-top: 300px solid transparent;
        border-bottom: 300px solid transparent;
    }
    30% {
        border-top: 270px solid transparent;
        border-bottom: 100px solid transparent;
    }
    70% {
        border-top: 100px solid transparent;
        border-bottom: 280px solid transparent;
    }    
    
    100% {
        border-top: 300px solid transparent;
        border-bottom: 300px solid transparent;
    }
}
@keyframes changeangle {
    0% {
        border-top: 300px solid transparent;
        border-bottom: 300px solid transparent;
    }
    30% {
        border-top: 270px solid transparent;
        border-bottom: 100px solid transparent;
    }
    70% {
        border-top: 100px...