Skip to content

@nick-jonas /waves-css-anim.scss
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Animating waves with CSS keyframes
@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;
}
}
}
@nick-jonas
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.