Shaking Bell Icon Animation using HTML and CSS

Shaking Bell Icon Animation using HTML and CSS

Share your love

Welcome to Coding Torque, your ultimate destination for unlocking the secrets of mesmerizing web animations! Hold on tight as we take you on an extraordinary journey today, where we delve into the realms of HTML and CSS to craft a captivating Shaking Bell Icon Animation that will leave your users spellbound. Imagine a bell icon that springs to life with a delightful shake, engaging your audience and commanding their attention like never before. Whether you’re a coding enthusiast eager to expand your repertoire of animation techniques or a design aficionado seeking to infuse a touch of magic into your projects, this tutorial is your gateway to mastering the art of dynamic web elements. So get ready to breathe life into your web creations, as we unravel the secrets behind this enchanting Shaking Bell Icon Animation. Let’s make your digital world come alive with an animation that resonates with every click and captivates your users in a symphony of visual brilliance!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code 

Starter Template

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Shaking Bell Icon Animation using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<div class="wrapper">

  <div class="bell" id="bell-1">
    <div class="anchor material-icons layer-1">notifications_active</div>
    <div class="anchor material-icons layer-2">notifications</div>
    <div class="anchor material-icons layer-3">notifications</div>
  </div>

</div>

CSS Code 

Create a file style.css and paste the code below.

body {
  background-color:#ffdd40;
}

.wrapper {
  position:relative;
  display: flex;
  width: 100%;
  height: 90vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.bell .material-icons { 
  /* font-size:12rem !important; */
  /* font-size:36px !important; */
  font-size:16rem !important;
}

.bell {
  position:relative;
  display:inline-block;  
  /* border:dashed 1px rgba(0,0,0,.25); */
  margin:0;
  padding:0;  
}

.bell .anchor {
  transform-origin:center top;
  display:inline-block;
  margin:0;
  padding:0;       
}

.bell .layer-1 {
  color:#1d1e22;
  z-index:9;
  animation: animation-layer-1 5000ms infinite;      
  opacity:0;  
}

.bell .layer-2 {
  color:#1d1e22;
  z-index:8;
  position:absolute;top:0;left:0;   
  animation: animation-layer-2 5000ms infinite;    
}

.bell .layer-3 {
  color:#333642;
  z-index:7;
  position:absolute;top:0;left:0; 
  animation: animation-layer-3 5000ms infinite;    
}

@keyframes animation-layer-1 {
  0% { transform: rotate(0deg);opacity:0; }
  8.0% { transform: rotate(0deg);opacity:0; }
  12.0% { transform: rotate(42deg);opacity:.5; }
  16.0% { transform: rotate(-35deg);opacity:.4; }
  20.0% { transform: rotate(0deg);opacity:.1; }
  23.0% { transform: rotate(28deg);opacity:.3; }
  26.0% { transform: rotate(-20deg);opacity:.2; }
  29.0% { transform: rotate(0deg);opacity:.1; }
  31.0% { transform: rotate(16deg);opacity:0; }
  33.0% { transform: rotate(-12deg);opacity:0; }
  35.0% { transform: rotate(0deg);opacity:0; }	
  37.0% { transform: rotate(-6deg);opacity:0; }
  39.0% { transform: rotate(0deg);opacity:0; }
}

@keyframes animation-layer-2 {
  0% { transform: rotate(0deg); }
  8.0% { transform: rotate(0deg); }
  12.0% { transform: rotate(42deg); }
  16.0% { transform: rotate(-35deg); }
  20.0% { transform: rotate(0deg); }
  23.0% { transform: rotate(28deg); }
  26.0% { transform: rotate(-20deg); }
  29.0% { transform: rotate(0deg); }
  31.0% { transform: rotate(16deg); }
  33.0% { transform: rotate(-12deg); }
  35.0% { transform: rotate(0deg); }	
  37.0% { transform: rotate(-6deg); }
  39.0% { transform: rotate(0deg); }
  40.0% { transform: rotate(6deg); }
  44.0% { transform: rotate(-3deg); }
  49.0% { transform: rotate(2deg);}
  55.0% { transform: rotate(0deg); }
  62.0% { transform: rotate(1deg); }
  70.0% { transform: rotate(0deg); }  
}

@keyframes animation-layer-3 {
  0% { transform: rotate(0deg);opacity:1; }
  8.0% { transform: rotate(0deg);opacity:1; }
  12.0% { transform: rotate(52deg);opacity:.5; }
  16.0% { transform: rotate(-48deg);opacity:.4; }
  20.0% { transform: rotate(0deg);opacity:1; }
  23.0% { transform: rotate(42deg);opacity:.3; }
  26.0% { transform: rotate(-30deg);opacity:.2; }
  29.0% { transform: rotate(0deg);opacity:1; }
  31.0% { transform: rotate(26deg);opacity:.15; }
  33.0% { transform: rotate(-18deg);opacity:.1; }
  35.0% { transform: rotate(0deg);opacity:1; }	
  37.0% { transform: rotate(-12deg);opacity:.8; }
  40.0% { transform: rotate(6deg);opacity:1; }
  44.0% { transform: rotate(-3deg);opacity:.8; }
  49.0% { transform: rotate(2deg);opacity:1; }
  55.0% { transform: rotate(0deg);opacity:1; }
  62.0% { transform: rotate(1deg);opacity:1; }
  70.0% { transform: rotate(0deg);opacity:1; }
}

Final Output

Shaking Bell Icon Animation using HTML and CSS

Written by: Piyush Patil

Code Credits: @brian1983

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love

Related Posts