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; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
The markup: