Pulse Animation

FREE

A pulse animation for elements

Demo

Blur In
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Installation

1

Copy and paste the following code into your project.

Add the following keyframes and animations to your global.css file.

global.css

@layer utilities {
//  START HERE ------------------------------------------------------------
  .animate-pulse-custom {
      animation: pulseCustom 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulseCustom {
      0%,
      100% {
          transform: scale(1);
          opacity: 1;
      }
      50% {
          transform: scale(1.05);
          opacity: 0.8;
      }
  }
//  END HERE ------------------------------------------------------------
}
2

Use the class animate-pulse-custom to apply the animation to an element.


<div class="animate-pulse-custom">
  // Your content here
</div>
3

Start using the animation