anime.css

<p align="center"> ⭐️ If you like Anime.css, give it a star! ⭐️ </p>

Usage no npm install needed!

<script type="module">
  import animeCss from 'https://cdn.skypack.dev/anime.css';
</script>

README

⭐️ 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 License: MIT