There was talk on our internal chat ( https://chat.vanila.io) about how https://itmeo.com/ have beautiful animation, and a member asked if someone can hack it. :) So I decide to examine their code and make just animation snippet code out of it.
Created
September 13, 2018 14:39
-
-
Save rpwnage/a3f16837d3704a609451f2d47f505b31 to your computer and use it in GitHub Desktop.
CSS Wave Animation with a .png
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="waveWrapper waveAnimation"> | |
<div class="waveWrapperInner bgTop"> | |
<div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div> | |
</div> | |
<div class="waveWrapperInner bgMiddle"> | |
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div> | |
</div> | |
<div class="waveWrapperInner bgBottom"> | |
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@keyframes move_wave { | |
0% { | |
transform: translateX(0) translateZ(0) scaleY(1) | |
} | |
50% { | |
transform: translateX(-25%) translateZ(0) scaleY(0.55) | |
} | |
100% { | |
transform: translateX(-50%) translateZ(0) scaleY(1) | |
} | |
} | |
.waveWrapper { | |
overflow: hidden; | |
position: absolute; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
top: 0; | |
margin: auto; | |
} | |
.waveWrapperInner { | |
position: absolute; | |
width: 100%; | |
overflow: hidden; | |
height: 100%; | |
bottom: -1px; | |
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); | |
} | |
.bgTop { | |
z-index: 15; | |
opacity: 0.5; | |
} | |
.bgMiddle { | |
z-index: 10; | |
opacity: 0.75; | |
} | |
.bgBottom { | |
z-index: 5; | |
} | |
.wave { | |
position: absolute; | |
left: 0; | |
width: 200%; | |
height: 100%; | |
background-repeat: repeat no-repeat; | |
background-position: 0 bottom; | |
transform-origin: center bottom; | |
} | |
.waveTop { | |
background-size: 50% 100px; | |
} | |
.waveAnimation .waveTop { | |
animation: move-wave 3s; | |
-webkit-animation: move-wave 3s; | |
-webkit-animation-delay: 1s; | |
animation-delay: 1s; | |
} | |
.waveMiddle { | |
background-size: 50% 120px; | |
} | |
.waveAnimation .waveMiddle { | |
animation: move_wave 10s linear infinite; | |
} | |
.waveBottom { | |
background-size: 50% 100px; | |
} | |
.waveAnimation .waveBottom { | |
animation: move_wave 15s linear infinite; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment