anime.css

⭐️ If you like Anime.css, give it a star! ⭐️

1.0.1
latest
Source
npm

Version published: 5 years ago

Weekly downloads: 46; increased by27.78%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

⭐️ If you like Anime.css, give it a star! ⭐️

Anime.css

アニメ is a lightweight cross-browser CSS animations library.

Install

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>

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__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

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. (✿◠‿◠)

License

The MIT License

FAQs

What is anime.css?

Is anime.css popular?

Is anime.css well maintained?

Package last updated on 05 Jul 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install