Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Animating waves with CSS keyframes

View waves-css-anim.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
@import "compass/css3/animation";
@import "compass/css3/transform";
 
$waveWidth:998px;
 
@include keyframes(waves){
0%{
left:0;
}
100%{
left:$waveWidth * -1;
}
}
 
 
body{
background:#e6e6e5;
overflow:hidden;
}
 
 
.waves{
position: fixed;
bottom: 0;
left: 0;
width: $waveWidth * 5;
z-index:0;
opacity:0.75;
.wave{
position:absolute;
width:100%;
height:300px;
background-image:url('../img/wave.png');
background-repeat:repeat-x;
&.bottom-wave{
@include animation(waves 17s infinite linear);
bottom:-90px;
}
&.middle-wave{
@include animation(waves 22s infinite linear);
bottom:100px;
margin-left:$waveWidth * -0.3;
}
&.top-wave{
@include animation(waves 27s infinite linear);
bottom:300px;
margin-left:$waveWidth * -0.6;
}
}
}
Owner

The markup:

<div class="waves">
        <div class="wave top-wave"></div>
        <div class="wave middle-wave"></div>
        <div class="wave bottom-wave"></div>
    </div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.