EspañolCSS entrance animation generator
Choose the effect, duration and easing and watch the preview. Turn on scroll mode so elements appear as people scroll down the page.
How to useEntrance animations for your site
Available in: 
CSS entrance animation generator: what it is for
Choose the effect, the duration, the easing (with the recommended strong ease-out), the distance and the stagger delay between items. The preview shows six blocks coming in and can be replayed.
The code uses opacity and transform transitions, an IntersectionObserver to animate when the element appears on screen and a version without movement for people who prefer less motion. Without JavaScript, the content appears normally.
How to use
- Choose the effect, duration and easing.
- Adjust the distance and stagger and watch the preview.
- Copy the CSS and the script and use the anima class.
When to use it
- Landing page sections that appear on scroll.
- Service and product cards in a stagger.
- Polishing company websites.
Frequently asked questions
What duration should I use?
For interface elements, 150 to 300 milliseconds. In sections of landing pages, up to about 600 ms still feels natural. Animations that are too long make the site feel slow.
Which easing should I choose?
For things entering the screen, use a curve that slows down at the end (a strong ease-out, such as cubic-bezier(0.23, 1, 0.32, 1)): the motion starts fast and settles softly. Avoid ease-in on entrances, because it delays exactly the beginning.
What about people who dislike motion?
The code respects the system's reduce motion setting (prefers-reduced-motion): elements only appear with a short fade, without movement.
How does scroll mode work?
An IntersectionObserver adds the visivel class when the element enters the screen. Without JavaScript, elements appear normally, without animation.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.