CSS ripple Animation | How to create Ripple Animation Using Html and Css

- December 11, 2022

Create Netflix Logo Using Html and css - Mxgk99

Preview:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Ripple Animation</title>
    </head>
    <body>
        <div class="ripple">
            <div></div>
            <div></div>
        </div>
    </body>
</html>

CSS:

 body{
            background: #000;
        }
        .ripple{
            width: 100px;
            height: 100px;
            margin: 200px auto;
            position: relative;
        }
        .ripple div{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border: 6px solid blue;
            animation: ripple 1s cubic-bezier(0.3,.54,.6,.63) infinite;
            border-radius: 50%;
        }
        .ripple div:nth-child(2){
            animation-delay: 0.5s;
        }
        @keyframes ripple {
            0%{
                width: 0;
                height: 0;
                opacity: 0;
            }
            5%{
                width: 0;
                height: 0;
                opacity: 0;
            }
            5.1%{
                width: 0;
                height: 0;
                opacity: 1;
            }
            100%{
                width: 88px;
                height: 88px;
                opacity: 0;
            }
        }