CSS | Pulse animation

Last Updated : 12 Jun, 2020

Read

Discuss

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:

My Personal Notes

Related Articles

CSS | Pulse animation

Start Your Coding Journey Now!

Related Articles

CSS | Pulse animation

Please Login to comment...

Start Your Coding Journey Now!