Waves Animation

http://themble.com/bones/

by secretgspot

HTML

<div id="wrap">
<div id="wave1-an"></div>
<div id="wave2-an"></div>
    
</div>

CSS

#wave1-an {
width: 100%;
height: 78px;
position: relative;
top: -30px;
background: url(http://s14.directupload.net/images/120301/96oi5vro.png);
background-repeat: repeat-x;
z-index: 8000;
display: block;
-webkit-animation: wave1 23s infinite linear
}

#wave2-an {
width: 100%;
height: 150px;
position: relative;
top: -70px;
background: url(http://s14.directupload.net/images/120301/96oi5vro.png);
background-repeat: repeat-x;
z-index: 8000;
display: block;
-webkit-animation: wave2 10s infinite linear
}

@-webkit-keyframes wave1 {
    0% {
     background-position-y: 0;
     background-position-x: 0px;
   }
   50% {
      background-position-y: 20px;
   } 
   100% {
     background-position-y: 0;
     background-position-x: -1198px;
   }
}



@-webkit-keyframes wave2 {
    0% {
     background-position-y: 0;
     background-position-x: 0px;
   }
   20% {
      background-position-y: 30px;
    opacity: 0.4;
   } 

40% {
      background-position-y: 5px;
   }

60% {
      background-position-y: 15px;
    opacity: 1;
   } 

   100% {
     background-position-y: 0;
     background-position-x: 1198px;
   }
}

#wrap {
    width: 100%;
    height: 200px;
    background: #1e4786;
    margin: 150px auto;
}