Bounce Animation

FREE

A bounce animation for elements

Demo

Bounce Animation
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 keyframes and animation to the global.css file.

global.css

@layer utilities {
   // START HERE ------------------------------------------------------------
  .animate-bounce {
    animation: bounce 1s infinite;
  }

  @keyframes bounce {
     from {
        transform: translateY(0);
       opacity: 1;
     }
     to {
        transform: translateY(-25%);
        opacity: 1;
     }
   }
   // END HERE ------------------------------------------------------------
}
2

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

<div className="animate-bounce-custom">
   <!-- Your content here -->
</div>
3

Start using the animation