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)
Responsive Counter Up Animation using JavaScript

Responsive Counter Up Animation using JavaScript

line-height: 2em;}

h3{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;
color:#333131;
font-weight: 520;

-webkit-font-smoothing: antialiased;
}

h2{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;

font-weight: 620;
-webkit-font-smoothing: antialiased;
}

.class {
background:#edf0f2;
font-family: Consolas,Monaco,Lucida Console,monospace;
line-height: 1.65;
word-wrap: break-word;
border-radius: 5px;
color:#001d8f;
font-size:17.1px;
padding-left:10px;
white-space: pre-wrap;}

button.last-btn{
padding:14px 29px;
font-size:17px;
background-color:#0e87f0;
border-radius:6px;
color:white;
font-family: Open Sans,Arial,sans-serif;
border:none;
margin-left:35%;

}

@media only screen and (max-width: 400px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 300px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 600px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 800px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}

@media only screen and (max-width: 400px) {
.copyButton {
width: 45%;
}

Responsive Counter Up Animation:

Responsive Counter Up Animation using JavaScript

In this article, you will learn how to create Responsive Counter Up Animation using HTML CSS, and JavaScript. We use javascript Counter Up Animation in many places. For different types of personal websites, business websites, etc. 

This type of responsive counter up animation is most commonly used in business websites. For example, you can use this project in case you want to show the quantity of any product on your business website.

30 OTP input fields using HTML, CSS, and JS

Count animation is used between the numbers here. This type of Responsive Counter Up Animation is often used by developers to create queries. But if you want you can make it with the help of simple javascript. This tutorial will show you how to create JavaScript Counter Up Animation.

JavaScript Counter Up Animation

Html, CSS, and javascript have been used to create this Counter Up Animation JavaScript. A very simple code is used here for beginners.

Below is a preview of this Number Countup Animation. Which will help you to know how it works. I used a nice background image on a web page as you saw above. On which four small boxes have been made. One icon, one number, and one test have been added to the box. 

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

I have made the background of this simple count-up animation transparent. As a result, these small boxes can be seen almost transparently in the background. 

I have already shared tutorials on creating many elements such as login forms, profile cards, etc. using transparent design.

How to Create a Responsive Count up Animation

To create this Responsive Counter Up Animation you need to have a basic idea about HTML, CSS, and javascript. I have shared step by step tutorial here. I have given possible results with pictures after each step.

Step 1: HTML Code of Count up Animation

I have added all the information using the following code. I made four boxes. In that box you can see the icon first, then the number count down, and then a text.

<div class=”wrapper”>
 
  <div class=”container”>
     <i class=”fa-brands fa-html5″></i>
     <span class=”num” data-val=”365″>000</span>
     <span class=”text”>HTML Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-python”></i>
     <span class=”num” data-val=”290″>000</span>
     <span class=”text”>Python Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-node-js”></i>
     <span class=”num” data-val=”219″>000</span>
     <span class=”text”>Javascript Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-bootstrap”></i>
     <span class=”num” data-val=”140″>000</span>
     <span class=”text”>Bootstrap Design</span>
  </div>
 
</div>
 
HTML Output:

Step 2: Design the webpage with CSS

I have designed the webpage using the following CSS codes. Here an image is used in the background of the web page. You can use any background color instead of this image.

 
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
 
body {
 background: url(“http://driving-tests.org/wp-content/uploads/2012/03/night-road.jpg” );
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 height: 100vh;
}
 
.wrapper {
 position: absolute;
 width: 80vw;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 display: flex;
 justify-content: space-around;
 gap: 10px;}
 
Design the webpage with CSS

Step 3: Basic structure of Counter Up box

(more…)

Continue ReadingResponsive Counter Up Animation using JavaScript
CSS Button Gradient Border Animation

CSS Button Gradient Border Animation (Free Code)

CSS Button Gradient Border Animation

In this tutorial, you will learn how to make CSS Button Gradient Border. Earlier I shared with you the tutorials of different types of gradient buttons. However, the background gradient color was not used here. Instead, the background is kept completely transparent and CSS Gradient Borders are used on the button borders.

Buttons we use in different places. If that button is attractive and animated it attracts more user attention. In that case, you can use such a simple CSS Button Gradient Border Button. This will definitely enhance the beauty and quality of your website.

CSS Button Gradient Border

Only if you have a basic idea about HTML and CSS can you build it. Below I have given a demo that will help you to get a live preview of this project. If you only want the source code, you can use the download button at the bottom of the article.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

I created a button on a web page as you can see above. A text has been used in the CSS Gradient button. I have kept the background of the button completely transparent. 

How to Create CSS Gradient Borders

However, I have used CSS Gradient Borders animation in button text and borders. Here you will have to animate different colors together. Here you can add colors of your choice.

Follow the steps below to create this CSS Button Gradient Border. I have given below all the code and step-by-step information.

1: Basic structure of Gradient Border

The basic structure of this button has been created using the following HTML and CSS codes. I used linear-gradient color in the background of the button. Here I have used 5 colors. 

You can add colors of your choice. Every color here can be seen at a 45-degree angle. Here I used the animation for four seconds. That means a color can be seen again after 4 seconds.

<div class=”container”>
    
<div>
* {
  box-sizing: border-box;
  margin: 0;
}
.container {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  min-width: 300px;
  min-height: 100px;
  padding: 12px 15px;
  background-image: linear-gradient(-45deg, #3eff0d, #db12c8, #00ffee,#fffa00,#0099ff);
  border-radius: 1000px;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -ms-border-radius: 1000px;
  background-size: 400% 400%;
  animation: mymove 4s linear infinite;
}
Basic structure of Gradient Border

2. Activate the background color animation (more…)

Continue ReadingCSS Button Gradient Border Animation (Free Code)