DEV Community 👩‍💻👨‍💻

Cover image for Amazing Notification Bell Alert Animation Using Pure CSS.
Chetan Atrawalkar
Chetan Atrawalkar

Posted on

Amazing Notification Bell Alert Animation Using Pure CSS.

Hello 👋

Welcome to CSS Animation Article. In this, we're going to see how to create an Amazing Notification 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.

Let's get started....
Before going to coding section, checkout quick preview first.

Here's Preview:-

Imagen

Step 1

Like always, create 2 files - Index.html and Style.css.

Step 2

After creating the html file add the <div> tag with bell icon that wrap into <i>tag.

HTML

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Amazing Notification 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>
Enter fullscreen mode Exit fullscreen mode

Step 3

Then add the Style.css for amazing style. Using this file we can manage the style as per requirement.

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: #7844E8;
    animation-name: col;

    animation-duration: 2s;

    animation-iteration-count: infinite;

}

.bell-border {

    height: 59px; 

    width: 59px;

    border: 1px solid #7844E8!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);

    }

}

Enter fullscreen mode Exit fullscreen mode

Step 4

Enjoy the work in your next Projects.

CODEPEN

Thats all, this is Amazing Notification Alert in Pure CSS. You can customize this code further as per your requirement.

Keep Claim And Just Code It 😎

Top comments (1)

Collapse
 
amircahyadi profile image
Amir-cahyadi

❤️👍

19 Valuable Github Repositories for Beginners

19 Valuable GitHub Repositories for beginner devs looking to take the first step into the web development career.