CSS | Pulse animation

12 Jun, 2020
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:
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.