waves

by alekskorovin

HTML

<div class="cont">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>    
</div>
<div class="cont">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>    
</div><div class="cont">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>    
</div><div class="cont">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
   ...

CSS

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { top: -50%; width: 100%;   }
25% { top: -52%;   }
50% { top: -54%;   }
100% { top: -55%; width: 100%; }

}
@-webkit-keyframes main {
0% { margin-left: 0;   }
25% { margin-left: 25px;   }
50% {  margin-left: 25px;   }
100% { margin-left: 0px; }    
}
@-webkit-keyframes wave {
0% { width: 70px;   }
100% { width: 84px; }    
}
@-webkit-keyframes mysecond /* Safari and Chrome */
{
0% { bottom: -50%; width: 100%;  }
25% { bottom: -52%;   }
50% { bottom: -54%;   }
100% { bottom: -55%; width: 100%; }

}
.cont {
    font: 0/0 small;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    margin-bottom: -70px;
    margin-left: 0;
    -webkit-animation: main 12s infinite;
   margin-top: -40px;
}
.cont:nth-child(2n) {
    left: 40px;
    top: -20px;
    -webkit-animation: main 9s infinite;
}
.cont:nth-child(4n) {
    left: -120px;
    top: -180px;
    -webkit-animation: main 8s infinite;
}
.wave {
    vertical-align: top;
    width: 70px;
    height: 70px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 70px 0 0 -5px;
    -webkit-animation: wave 9s infinity;
}
.wave:before {
    content: '';
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    border: solid 5px red;
    border-radius: 100%;
    top: -50%;    
    -webkit-animation: myfirst 9s infinite;
}
.cont .wave:first-child {
    margin-left: 0;
}
.cont .wave:nth-child(2n) {
     margin-top: 0;   
}
.cont .wave:nth-child(2n):before {
    bottom: -50%;
    top: auto;
    -webkit-animation: mysecond 9s infinite;
}