⭐️ If you like Anime.css, give it a star! ⭐️
アニメ is a lightweight cross-browser CSS animations library.
Anime.css
is available on npm:
npm install anime.css --save
Anime.css
is available on yarn as well:
yarn add anime.css
or add it directly to your webpage:
<head>
<link
rel="stylesheet"
href="https://unpkg.com/anime.css@1.0.1/anime.min.css"
/>
</head>
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" />
-
Fade In
anime__fadeIn
anime__fadeInDown
anime__fadeInLeft
anime__fadeInRight
-
Fade Out
anime__fadeOut
anime__fadeOutDown
anime__fadeOutLeft
anime__fadeOutRight
anime__fadeOutUp
-
Bounce In
anime__bounceIn
anime__bounceInDown
anime__bounceInLeft
anime__bounceInRight
-
Bounce Out
anime__bounceOut
anime__bounceOutDown
anime__bounceOutLeft
anime__bounceOutRight
anime__bounceOutUp
-
Flip In
anime__flipInX
anime__flipInY
-
Flip Out
anime__flipOutX
anime__flipOutY
-
Roll
anime__rollIn
anime__rollOut
-
Rotate In
anime__rotateIn
anime__rotateInUpLeft
anime__rotateInUpRight
anime__rotateInDownLeft
anime__rotateInDownRight
-
Rotate Out
anime__rotateOut
anime__rotateOutUpLeft
anime__rotateOutUpRight
anime__rotateOutDownLeft
anime__rotateOutDownRight
-
Light Speed
anime__lightSpeedIn
anime__lightSpeedOut
-
Action
anime__flash
anime__hinge
anime__pulse
anime__wobble
anime__winggle
anime__shake
anime__swing
anime__tada
Huge thanks to:
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. (✿◠‿◠)