Skip to content

Instantly share code, notes, and snippets.

@nick-jonas
Created March 27, 2014 22:39
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save nick-jonas/9820642 to your computer and use it in GitHub Desktop.
Save nick-jonas/9820642 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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