CSS | 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.

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.