How to create a pulse animation in CSS

How to create a pulse animation in CSS

In this post we will give you information about How to create a pulse animation in CSS. Hear we will give you detail about How to create a pulse animation in CSSAnd how to use it also give you demo for it if it is necessary.

we are going to learn about creating a pulse effect animation in CSS.

Codepen demo

Here is our CSS pulse animation demo.

Here is our second demo which is CSS pulsing heart animation.

Pulse animation is mostly used to draw the attention of a user to your buttons.

Getting started

First, we need to create an html markup that contains two div tags where one is placed inside another.

<div >      <div ></div> </div>


Now, we need to style the circle and pulse classes.

.center {  display: flex;  justify-content: space-evenly;  align-items: center;  height: 100vh;}.circle {  background:#FF66CC;  width: 35px;  height: 35px;  border-radius: 50%;  box-shadow: 0px 0px 1px 1px #0000001a;}.pulse {  animation: pulse-animation 2s infinite;}@keyframes pulse-animation {  0% {    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);  }  100% {    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);  }}

This above code will create a circle with 35px of height and width the pulse class is responsible for running the pulse-animation for 2 seconds infinitely.

See also  Custom Operators in Swift with practical code examples - onlinecode

Inside the @keyframes at 0% we are setting the box-shadow opacity to 0.2 when the animation reaches the 100% we are spreading the box-shadow around the circle by 20px so that we can see pulse effect.

CSS pulsing heart animation

In pulsing heart animation, we need to scale the heart size at first, when the animation reaches the 100% we need to scale back to the initial size.

Let’s write code.

Html markup

This markup contains a div tag and and i tag with heart icon is added.

<div >    <i ></i></div>

We are using font-awesome icons

Css styling

.heart {  color: red;  font-size: 50px;  animation: heart-pulse 0.9s infinite ease-out;}@keyframes heart-pulse {  0% {    transform: scale(0); /* scaling to 0 */  }  50% {    transform: scale(1.2); /* increasing the size */  }  70% {    transform: scale(0.65); /* decreasing the size */  }  100% {    transform: scale(0); /* seeting back to initial size */  }}

Find me on twitter @saigowthamr

Hope this code and post will helped you for implement How to create a pulse animation in CSS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

See also  Weak self and unowned self explained in Swift - onlinecode

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US