How to build a Pulse Animation using HTML ,CSS | Pulse Animation Css

How to build a Pulse Animation using HTML ,CSS | Pulse Animation Css

 

How to build a Pulse Animation using HTML ,CSS | Pulse Animation Css

Welcome to today’s tutorial. Today we are going to create a Pulse Animation. For this, we are going to use HTML, CSS and Javascript.

 You need basic  knowledge of CSS for this project. This tutorial is well suited for CSS intermediates. Let us get started with the project.

 PULSE ANIMATION:-

CSS Pulse Animation Effect provides a pulsating effect to an element that changes its shape and opacity. As per the time and need, different @keyframes are used to achieve this animation. The simple yet powerful effect makes the website more vibrant, colorful, and attractive. This animation is completely implemented without using JavaScript.
 
 

Live server:- 

Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

HTML:-

 Pulse animation is commonly used to draw the attention of a user. In this snippet, we are going to create pulse effect animation in CSS. At First, we need to create two div tags where one is placed inside another. The container div will be named as the wrapper. The div inside that will be named as a box. 

 
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 </head>  
 <body>  
      <div class="wrapper">  
           <div class="box">  
           </div>  
      </div>  
 </body>  
 </html>
 
 

 CSS:-

In the CSS part, we have eliminated the default margin and padding by setting them to zero. The background is set to black but, you can choose whatever color you want.
 
 After that, we aligned the wrapper div at the center of the viewport. For that, we used absolute position value and CSS transform property.
 
We gave the ‘box’ div a particular height and width of 100px. Then we set the animation value for the CSS pulse animation. Here animate is animation-name, 2s is the animation duration, linear is the animation timing function, and infinite is the animation iteration count value.
 
 Inside the @keyframes at 0%, we are setting the box-shadow opacity to 0 and, the color will be cornflower blue. 
 
When the animation reaches 40%, we are spreading the box shadow around the circle by 50px so that we can see the pulse effect. 
We set the same value for 80%. When the animation reaches 100%, the box-shadow value will go back to 0.
 
 body {  
      margin: 0;  
      padding: 0;  
      background: #000;  
 }  
 .wrapper {  
      position: absolute;  
      top: 50%;  
      left: 50%;  
      transform: translate(-50%, -50%);  
 }  
 .box {  
      width: 100px;  
      height: 100px;  
      background: cornflowerblue;  
      border-radius: 50%;  
      text-align: center;  
      line-height: 130px;  
      animation: animate 2s linear infinite;  
      cursor: pointer;  
 }  

 @keyframes animate {  
      0% {  
           box-shadow: 0 0 0 0 cornflowerblue;  
      }  
      40% {  
           box-shadow: 0 0 0 50px rgba(255, 254, 67, 0);  
      }  
      80% {  
           box-shadow: 0 0 0 50px rgba(255, 254, 67, 0);  
      }  
      100% {  
           box-shadow: 0 0 0 rgba(255, 254, 67, 0);  
      }  
 }

I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh. 
 


Leave a Reply