Notification Icon Animation Using CSS

by

Animate the Notification Icon or Bell Icon on website with HTML and CSS

HTML:

<img src="bell-icon.png" class="bell-icon">


CSS:


body{
    background: #000;
}

.bell-icon{
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.bell-icon:hover{
    animation: shake 1s linear infinite;
    transform-origin: 50% 0;
}

@keyframes shake {
   0%{
    transform: translate(-50%,-50%) rotate(0deg);
   } 
   25%{
    transform: translate(-50%,-50%) rotate(-10deg);
   } 
   50%{
    transform: translate(-50%,-50%) rotate(0deg);
   } 
   75%{
    transform: translate(-50%,-50%) rotate(10deg);
   } 
   100%{
    transform: translate(-50%,-50%) rotate(0deg);
   } 
}


Download the bell icon here: bell-icon.png

Leave a Comment