LogoBlockies Animate.

Blur In Animation

FREE

A blur in 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-blur-in {
        animation: blur-in 0.7s ease-out forwards;
     }

     @keyframes blur-in {
         from {
            filter: blur(10px);
            opacity: 0;
         }
         to {
            filter: blur(0);
            opacity: 1;
         }
       }
       // END HERE ------------------------------------------------------------
}
2

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

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

Start using the animation