Read more about the article How to Create Pulse Animation Using CSS (Code + Demo)

How to Create Pulse Animation Using CSS (Code + Demo)

CSS Pulse Animation We see it in different places on web pages. Pulse Animation is used to make different UI elements interesting.

Here we will discuss how a Pulse Animation can be created using CSS. Here I have shared different types of designs such as Simple Pulse Animation CSS, button pulse animation, text pulse animation, image pulse animation, pulse animation on hover, etc.

Here I will use only CSS and HTML. I have shared here the complete information of each design, source code, and live demo of everything.

Examples – 1 

Simple Pulse Animation CSS

This is a simple Pulse Animation design created by HTML and CSS only. This design is basically a basic example of Pulse Animation.

There is a small round point here that will continue to be the center of animation.

Simple Pulse Animation CSS
Demo
Download

Hopefully, with the help of the demo button above, you know how it works. If you want you can download all the code using the button below.

But below I have given all the HTML CSS code. The code used for this CSS Pulse Animation effect is very simple so you will not have any difficulty understanding it.

The following code is the HTML code that helps to add the basic information of this pulsing animation. Here I have put together all the HTML codes that you can copy and paste into your HTML file.

<!DOCTYPE html>
<!–Simple Pulse Animation–>
<html lang=“en”>
<head>
    <!–CSS file–>
   <link rel=“stylesheet” href=“style.css”>
</head>
<body>
    <div class=“relative”>
        <button></button>
        <div class=“span”></div>
        <div class=“span”></div>
    </div>
</body>
</html>

The following code is the CSS code that activates this pulsing animation. Copy these and paste them into your CSS file. Remember to rename your CSS file to ‘style.css’.

.relative {
  position: relative;
  margin: 50vh auto;
  width: 60px;
}
.span {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 0;
  left: 0;
  border: 0;
  -webkit-animation: sploosh 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation-iteration-count: infinite;
}
.span:nth-child(2) {
  -webkit-animation-delay: .33s;
  -webkit-animation-duration: 2.2s;
}
button {
  border: 0;
  margin: 50vh auto;
  border-radius: 50%;
  display: block;
  width: 60px;
  height: 60px;
  background-color: rgba(71, 225, 141, 1);
  -webkit-animation: pulse 2s ease-out;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes sploosh {
  0% {
    box-shadow: 0 0 0 0px rgba(71, 225, 141, .7);
    background: rgba(71, 225, 141, .7);
  }
  80% {
    background: rgba(66, 166, 223, 0);
  }
  100% {
    box-shadow: 0 0 0 120px rgba(66, 166, 223, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  3.3% {
    -webkit-transform: scale(1.1);
  }
  16.5% {
    -webkit-transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

Hopefully, you have been able to create a simple pulse animation design using the above code.

Examples – 2 

Button pulse animation CSS (more…)

Continue ReadingHow to Create Pulse Animation Using CSS (Code + Demo)