creocodigo
Notification Pulse Alert in Pure CSS

Notification Pulse Alert in Pure CSS

Shikhar Baniya's photo
Shikhar Baniya
·

2 min read

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create an Awesome Notification Pulse Alert Animation in Pure CSS. Notifications are very important in today's life. It reminds you the things that you forgot, It shows you the progress of various things so that you don't have to open that specific application again and again. Hence to show that user recieves a new notification is not a simple task. Here's an easy animation which you can use in your application.

Here's a preview-

example.gif

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Notification Pulse Alert</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="bell">
    <div class="bell-border"></div>
    <i class="fas fa-bell btn-bell"></i>
</div>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


body {
    height: 100%;
    overflow-x: hidden;
    margin: 0 auto;
    background: #f6f7fc;
}
.bell, .bell-border, .btn-bell {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bell {
    height: 60px; 
    width: 60px;
    box-shadow: -1px 2px 10px #999;
    background: #b74096;
    animation-name: col;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.bell-border {
    height: 59px; 
    width: 59px;
    border: 1px solid #b74096 !important;
    animation-name: bord-pop;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc ;
}
.btn-bell {
    color: white;
    font-size: 20px;
    animation-name: bell-ring;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes bord-pop {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0.1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0;
    }
}
@keyframes col {
    0% {
        transform: scale(1) translate(0,0);
    }
    10% {
        transform: scale(1.1) translate(0,0);
    }
    75% {
        transform: scale(1) translate(0,0);
    }
    100% {
        transform: scale(1) translate(0,0);
    }
}
@keyframes bell-ring {
    0% {
        transform: translate(-50%, -50%);
    }
    5%, 15% {
        transform: translate(-50%, -50%) rotate(25deg);
    }
    10%, 20% {
        transform: translate(-50%, -50%) rotate(-25deg);
    }
    25%  {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love

HTML5CSS3push notificationsWeb Developmentwebdev