In this tutorial, you will learn how to add a wavy footer animation with CSS. A wave image is used and animation is added to it. You can download this image with the link provided at the bottom. Watch the video below for a detailed tutorial.
<body>
<div class="container">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</body>body {
background-color: #2e3537;
margin: 0;
}
.container {
position: relative;
height: 100vh;
}
.wave {
position: absolute;
bottom: 0;
height: 120px;
width: 100%;
background: url('/wave.png') repeat-x;
background-size: 250rem 30rem;
animation: animate 15s linear infinite;
}
@keyframes animate {
0% {
background-position-x: 0;
background-position-x: -250rem;
}
}
.wave:nth-child(1) {
opacity: 0.9;
}
.wave:nth-child(2) {
opacity: 0.5;
animation-delay: 0.2s;
animation-direction: reverse;
}
.wave:nth-child(3) {
opacity: 0.7;
animation-delay: 5s;
}