Animate.css | A cross-browser library of CSS animations. logo

[ TOOL_RECORD / ACTIVE ]

Animate.css | A cross-browser library of CSS animations.

> Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Animate.css | A cross-browser library of CSS animations. 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

[ ALTERNATIVE_INDEX ]Explore 10 alternatives to Animate.css | A cross-browser library of CSS animations.

> Related tools

/ Compare alternatives

CSS Pro logo
CSS Pro/ Browser 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 Scan/ Browser Extensions

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

[Curated]
AnimXYZ logo
AnimXYZ/ CSS

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]
Animejs logo
Animejs/ CSS

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]