Skip to content

Instantly share code, notes, and snippets.

@trabuccocampos
Last active May 8, 2017 22:25
Show Gist options
  • Save trabuccocampos/ea2916352c4dbbdb86dd to your computer and use it in GitHub Desktop.
Save trabuccocampos/ea2916352c4dbbdb86dd to your computer and use it in GitHub Desktop.
Wave .svg animation
/* WAVES as seen on http://www.villafeltrinelli.com
* -------------------------- */
.wave_wrapp {
width: 400px;
position: absolute;
background: red;
top: 120px;
position: absolute;
left: 50%;
margin-left: -200px;
}
@media only screen and (max-width: 768px) {
.wave_wrapp {
display: none;
}
}
.wave {
width: 97px;
margin: 0 auto;
position: absolute;
}
.wave div {
width: 97px;
height: 6px;
margin-bottom: 4px;
position: relative;
overflow: hidden;
}
.wave div span {
background: url(http://www.villafeltrinelli.com/_/img/wave.svg);
width: 100px;
height: 6px;
display: block;
position: absolute;
-webkit-animation: movewaves 30s linear infinite;
-moz-animation: movewaves 30s linear infinite;
animation: movewaves 30s linear infinite;
}
.wave div:nth-child(2n) {
margin-left: 15px;
}
.wave:nth-child(n) {
right: 15px;
}
.wave:nth-child(2n) {
top: 85px;
left: -275px;
}
@keyframes movewaves {
from {
background-position: 5% 5%;
}
to {
background-position: -700% 0%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment