CSS Pulse Animation Effect

CSS Pulse Animation Effect. CSS makes our website awesome. CSS3 allows creating amazing animations for the website without JavaScript. CSS animation is simple and easy to understand. So, let’s see the Pulse Animation CSS.    

CSS Pulse Animation

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pulse Animation CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="center">
        <div class="pulse">code_snail</div>
    </div>
</body>

</html>

style.css

body {
    margin: 0;
    padding: 0;
    background: #262626;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pulse {
    width: 150px;
    height: 150px;
    background: rgb(255, 0, 64);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 150px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);
    }

    40% {
        box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);
    }

    80% {
        box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
    }
}

Output

pulse animation css

so, it’s simple CSS Pulse Animation effect. This Animation is helpful for your website. Try this animation in your upcoming project. To download this code click on Download button here,Download

I hope you like this CSS Pulse Animation. so try this code and share with your friends. Happy Coding.

You may also like,

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee
Your subscription could not be saved. Please try again.
Your subscription has been successful.

Newsletter

Subscribe to our newsletter and stay updated.

4 thoughts on “CSS Pulse Animation Effect”

Leave a Comment