Animate.css logo

Animate.css

Just-add-water CSS animations.

Animate.css preview

About

Animate.css is a cross-browser library of CSS animations that can be used to add emphasis, create engaging home pages, sliders, and attention-guiding hints in web projects. This library is particularly helpful for web developers and designers who want to enhance the user experience of their websites. With Animate.css, users can easily add animations to their web projects without requiring extensive coding knowledge.

Details

  • Installation: Animate.css can be installed using npm or Yarn, or by adding a CDN link to the webpage.
  • Basic Usage: To use Animate.css, add the animateanimated class to an element, along with the desired animation class (e.g. animatebounce).
  • Animations: Animate.css provides a range of animations, including attention seekers, fades, and more.
  • Utility Classes: The library includes utility classes for delaying, slowing down, or speeding up animations, as well as repeating animations.
  • Customization: Animate.css allows for customization of animation duration, delay, and iterations using CSS custom properties.
  • Accessibility: The library supports the prefers-reduced-motion media query, allowing users with motion sensitivity to opt out of animations.

Animate.css is a powerful and easy-to

Related tools

CSS Pro logo
CSS ProBrowser Extensions

A re-imagined Devtools for web design.

Curated

Over 250 free and open source components and templates for tailwind css to build beautiful UI.

Curated
CSS Scan logo
CSS ScanBrowser Extensions

The fastest and easiest way to check, copy and edit CSS.

Curated

The first composable CSS animation toolkit

Curated

Luxa is a minimalist CSS framework.

Curated

A utility-first CSS framework for rapidly building custom designs

Curated

A lightweight JavaScript animation library with a simple, yet powerful API.

Curated

A curated collection of beautiful premade gradients using default colors from the Tailwind CSS color palette.

Curated