Skip to content
Related Articles

Related Articles

Improve Article

CSS | Pulse animation

  • Last Updated : 12 Jun, 2020
Geek Week

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.

Example 1: The below example shows an outward pulse block that stretches itself and shrinks back when it reaches its highest size, starts with a circle, and ends with a square shape with different colors coming out each time when it changes its shape.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | Pulse animation
    </title>
      
    <style>
        .element {
            height: 250px;
            width: 250px;
            margin: 0 auto;
            background-color: lime;
            animation-name: stretch;
            animation-duration: 2.0s;
            animation-timing-function: ease-out;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-play-state: running;
        }
  
        @keyframes stretch {
            0% {
                transform: scale(.5);
                background-color: green;
                border-radius: 100%;
            }
  
            50% {
                background-color: orange;
            }
  
            100% {
                transform: scale(2.0);
                background-color: red;
            }
        }
  
        body,
        html {
            height: 100%;
        }
  
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
  
<body>
    <div class="element"></div>
</body>
  
</html>

Output:

Example 2: The below examples show an inward or reverse pulse generating animation effect on a circle that gives inward circular pulse after the completion of the effect. It expands back to its original state and the effect continues to happen.




<!DOCTYPE html>
<html>
  
<head>
    <title>Reverse Pulse </title>
    <link rel="stylesheet" 
        type="text/css" href="style.css">
          
    <style>
        .pulse {
            position: absolute;
            top: 35%;
            left: 40%;
            transform: translate(-505, -50%);
            width: 100px;
            height: 100px;
            background: #33ff00;
            border: 2px solid #33ff00;
            border-radius: 50%;
            box-sizing: border-box;
            box-shadow: 0 0 0 36px #45237a,
                    0 0 0 40px #56ff00;
        }
  
        .pulse:before,
        .pulse:after {
            content: '';
            position: absolute;
            left: -30px;
            top: -30px;
            right: -30px;
            bottom: -30px;
            border: 2px solid #33ff00;
            border-radius: 50%;
            animation: animate 2s linear infinite
        }
  
        .pulse:after {
            animation-delay: 1s;
        }
  
        @keyframes animate {
            0% {
                transform: scale(2.0);
            }
  
            100% {
                transform: scale(0.7);
            }
        }
        }
    </style>
</head>
  
<body>
    <div class="pulse"></div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :