animate.css 's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.| Name | Version | Size | License | Type | Vulnerabilities |
|---|
Animate.css is a library that adds easy-to-use, customizable CSS animations to your projects. It provides a wide range of animations and transitions, making it an ideal solution for enhancing the user interface and user experience of websites and web applications. The utility of animate.css can range from simple micro-interactions on buttons and links to advanced motion design.
Using animate.css is fairly straightforward. First, it has to be installed in the project with either npm or yarn, using one of the following commands:
npm install animate.css --save
# or
yarn add animate.css
After installation, it can be imported to the project using standard CSS import in your stylesheet:
@import 'animate.css';
Or by including it in your HTML file:
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
To use animations included in the library, simply add classes to the elements you want to animate. The first class should be animate__animated (which starts the animation) and the second class should be the name of chosen animation animate__bounce, animate__flash, etc:
<h1 class="animate__animated animate__bounce">An animated element</h1>
Note: Class names are based on camelCase naming convention, and the list of animations can be categorized e.g., fades, bounces, etc.
The complete animate.css documentation can be found on the official website, offering comprehensive guides and examples on how to make the most of the library. More technical details including contribution guidelines and the project’s Code of Conduct are provided in the readme file of the repository, reachable at git+https://github.com/animate-css/animate.css.git.
