anime.css
v1.0.1
Published
<p align="center"> ⭐️ If you like Anime.css, give it a star! ⭐️ </p>
Readme
Anime.css
アニメ is a lightweight cross-browser CSS animations library.
Install
Anime.css is available on npm:
npm install anime.css --saveAnime.css is available on yarn as well:
yarn add anime.cssor add it directly to your webpage:
<head>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/anime.min.css"
/>
</head>Usage
Add the class anime__animated to an element, along with many of the anime names that starting with the anime__ prefix:
<img src="anime.png" class="anime__animated anime__fadeIn" />Anime Names Starting with anime__ Prefix
Fade In
anime__fadeInanime__fadeInDownanime__fadeInLeftanime__fadeInRight
Fade Out
anime__fadeOutanime__fadeOutDownanime__fadeOutLeftanime__fadeOutRightanime__fadeOutUp
Bounce In
anime__bounceInanime__bounceInDownanime__bounceInLeftanime__bounceInRight
Bounce Out
anime__bounceOutanime__bounceOutDownanime__bounceOutLeftanime__bounceOutRightanime__bounceOutUp
Flip In
anime__flipInXanime__flipInY
Flip Out
anime__flipOutXanime__flipOutY
Roll
anime__rollInanime__rollOut
Rotate In
anime__rotateInanime__rotateInUpLeftanime__rotateInUpRightanime__rotateInDownLeftanime__rotateInDownRight
Rotate Out
anime__rotateOutanime__rotateOutUpLeftanime__rotateOutUpRightanime__rotateOutDownLeftanime__rotateOutDownRight
Light Speed
anime__lightSpeedInanime__lightSpeedOut
Action
anime__flashanime__hingeanime__pulseanime__wobbleanime__winggleanime__shakeanime__swinganime__tada
Inspired by
Huge thanks to:
Contributing
We'd love to have your helping hand on contributions to Anime.css by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
