82.9K ·GitHub
What is this?
Animate.css is a cross-browser library of ready-made CSS animations you can drop into a page to animate elements like fades, bounces, and slides.
Animate.css is a cross-browser library of ready-made CSS animations you can drop into a page to animate elements like fades, bounces, and slides.Is this a JS framework or just a stylesheet?It is a plain CSS stylesheet, not a JavaScript library — you link the CSS file and toggle animation classes on elements yourself.
It is a plain CSS stylesheet, not a JavaScript library — you link the CSS file and toggle animation classes on elements yourself.How do I add it to a project?Install it via npm or yarn, or include the built CSS file directly, then apply the provided animation classes to your HTML elements.
Install it via npm or yarn, or include the built CSS file directly, then apply the provided animation classes to your HTML elements.Do I need a build tool or JS framework to use it?No framework is required; it's built with PostCSS during development but ships as a plain compiled CSS file with no runtime dependencies.
No framework is required; it's built with PostCSS during development but ships as a plain compiled CSS file with no runtime dependencies.Will the animations always play for every user?No — Animate.css respects the prefers-reduced-motion setting, so users who have 'reduce motion' enabled in their OS won't see the animations.
No — Animate.css respects the prefers-reduced-motion setting, so users who have 'reduce motion' enabled in their OS won't see the animations.What categories of animations does it include?The core team mentions categories like fades and bounces, and contributors are asked to follow this naming convention (camelCase, categorized by type such as fades, bounces, etc.) when adding new animations.
The core team mentions categories like fades and bounces, and contributors are asked to follow this naming convention (camelCase, categorized by type such as fades, bounces, etc.) when adding new animations.How do I submit a new animation to the project?Submit a pull request following the camelCase naming convention and categorization, and include a demo of the animation in a CodePen.
Submit a pull request following the camelCase naming convention and categorization, and include a demo of the animation in a CodePen.Where can I find full documentation and usage examples?The full Animate.css documentation, including usage examples, is published on the project's official website rather than in the README.
The full Animate.css documentation, including usage examples, is published on the project's official website rather than in the README.What are similar projects?CSS-Inspiration, iCSS, SpinKit, pure, anime, yeti, html-ppt-skill, devicon
CSS-Inspiration, iCSS, SpinKit, pure, anime, yeti, html-ppt-skill, devicon