Thu Apr 21 2022

Ocean Wave Animation using SVG

CSS3034 views

File Name: wave-animation-using-css.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ocean Wave Animation using SVG</title>
    <style>
       * {
           margin: 0;
           padding: 0;
       }

       body {
           background-color: #fff;
           position: relative;
           width: 100%;
           height: 100vh;
       }

       .wave {
           position: absolute;
           left: 0;
           right: 0;
           bottom: 0;
           height: 150px;
           background-image: url('https://gist.githubusercontent.com/geekboots-team/3fadc92db287cc40139e2346786a2ae1/raw/8673dcad52e59ca1e8489c7d481e8ee7ad217d35/wave.svg');
           background-position: 0 0;
           background-repeat: repeat-x;
           background-size: 100%;
           animation: wave 6.5s infinite ease-in-out alternate;
       }

       .wave::before {
           content: '';
           position: absolute;
           left: 0;
           right: 0;
           bottom: 0;
           opacity: 0.6;
           height: 160px;
           background-image: url('https://gist.githubusercontent.com/geekboots-team/3fadc92db287cc40139e2346786a2ae1/raw/8673dcad52e59ca1e8489c7d481e8ee7ad217d35/wave.svg');
           background-position: 0 0;
           background-repeat: repeat-x;
           background-size: 150%;
           animation: wave 7s infinite ease-in backwards;
       }

       .wave::after {
           content: '';
           position: absolute;
           left: 0;
           right: 0;
           bottom: 0;
           opacity: 0.4;
           height: 160px;
           background-image: url('https://gist.githubusercontent.com/geekboots-team/3fadc92db287cc40139e2346786a2ae1/raw/8673dcad52e59ca1e8489c7d481e8ee7ad217d35/wave.svg');
           background-position: 0 0;
           background-repeat: repeat-x;
           background-size: 60%;
           animation: wave 8s infinite linear forwards;
       }

       @keyframes wave {
           0% {
               background-position: 0 0;
           }

           50% {
               background-position: 15vw 2vh;
           }

           100% {
               background-position: 0 0;
           }
       }
    </style>
</head>
<body>
    <div class="wave"></div>
</body>
</html>

Author:Geekboots