Blur In Animation
FREE
A blur in animation for elements
Demo
Exclusive Launch 50% offspots left: 0 / 50


$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.
@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