Logo
Blockies Animate.

Blur In Animation

FREE

A blur in animation for elements

Demo

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates
All animations
No subscriptions
No hidden fees
$19.99
Payment once and get lifetime access

Blur In Animation

This is a simple blur in animation that can be used for elements entering the viewport.

Installation

1

Copy and paste the following code into your project.

Add the class animate-blur-in to the element you want to animate.

global.css
 
@layer utilities {
 
.animate-blur-in {
animation: blurIn 0.7s ease-out forwards;
}
 
@keyframes blurIn {
from {
  filter: blur(10px);
  opacity: 0;
}
to {
  filter: blur(0);
  opacity: 1;
}
}
 
}
2

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

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