Fade In Animation

FREE

A simple fade in animation for elements

Demo

Fade 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-fade-in {
   animation: fadeIn 1s ease-in-out forwards;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 // END HERE ------------------------------------------------------------
}
2

Use the class animate-fade-in to apply the animation to an element.


<div class="animate-fade-in">
  <!-- Your content here -->
</div>
3

Start using the animation