Logo
Blockies Animate.

Pulse Animation

FREE

A pulse animation for elements

Demo

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates
All animations
No subscriptions
No hidden fees
$19.99
Payment once and get lifetime access

Pulse Animation

This is a simple pulse animation that you can use for elements that enter the viewport.

Installation

1

Copy and paste the following code into your project.

Add the class animate-pulse-custom to the element you want to animate.

global.css
 
@layer utilities {
 
.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;
  }
 }
}
2

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

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