Float Animation

FREE

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

global.css
@layer utilities {
     // START HERE ------------------------------------------------------------
     .animate-float {
        animation: float 3s ease-in-out infinite;
     }

     @keyframes float {
         from {
            transform: translateY(0);
         }
         to {
            transform: translateY(-20px);
         }
     }
     // END HERE ------------------------------------------------------------
}
2

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

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

Start using the animation