Animate.css: Free CSS Animations for Any Website

In my experience, the hardest part of building a good-looking website through an agent is not the layout or the colors, but the absence of motion. When nothing on the page moves, it feels unfinished to the person who visits it, even if the design itself is good.

I have been using one collection of CSS animations for most of my projects, because the agents I work with know it well and can apply it without any explanation. It has more than 82 000 stars on GitHub and it covers every animation type I have ever needed, from gentle fades to bouncing effects and sliding entrances.

The authors describe it as "just-add-water CSS animation", and that description is accurate in a literal sense. You add one line to the head of your HTML file, you add two class names to any element, and the animation plays without any JavaScript or build configuration required.

1How to add CSS animations to your website

The whole collection is available from a CDN. You paste this line into the head section of your HTML page, and every animation becomes available immediately.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

After that line is in place, you apply two class names to any element. The first class, animate__animated, marks the element as animated. The second class names the specific animation, such as animate__fadeIn or animate__bounce. You can put these on a heading, a button, an image, or any other HTML element.

<h1 class="animate__animated animate__fadeInLeft">Welcome</h1>

In my practice, I usually tell the agent something like: "Use animate.css and make the hero heading fade in from the left, and the main button do a light pulse animation." The agent adds the CDN link and the correct class names without any additional instruction, because it already knows this collection.

2What kinds of animations are in the collection

The collection organizes its animations into groups. Regarding fading effects, there are fadeIn, fadeOut, fadeInLeft, fadeInRight, fadeInUp, fadeInDown, and several more directions. There are also bouncing animations for entrances and exits, sliding animations from all four sides, and a group called attention seekers with effects like bounce, flash, pulse, and shakeX. For timing, you add a class like animate__slow to make an animation take two seconds, or animate__faster to reduce it to 500 milliseconds.

3Can you animate with CSS without any library

You can write CSS animations from scratch, but it requires understanding keyframes and timing functions, which is something that takes time to learn. In my experience, giving the agent a ready collection is faster and produces more consistent results than asking it to invent animations each time. The agent also knows the collection's class names by heart, so you can describe what you want in plain language.