Skip to content

Latest commit

 

History

History
148 lines (133 loc) · 2.96 KB

README.md

File metadata and controls

148 lines (133 loc) · 2.96 KB
Raw

Animate CSS - Tailwind CSS Plugin

Add Animate CSS as Tailwind CSS plugin to your project.

Installation

Pull it in through npm or yarn:

npm install tailwindcss-animatecss
yarn add tailwindcss-animatecss

Usage

Add Tailwind CSS to your project as described here. Install tailwindcss plugin as described above and add it to your tailwind.config.js file.

plugins: [
  // Other plugins
  require('tailwindcss-animatecss')({
        settings: {
          animatedSpeed: 1000,
          heartBeatSpeed: 1000,
          hingeSpeed: 2000,
          bounceInSpeed: 750,
          bounceOutSpeed: 750,
          animationDelaySpeed: 1000
        },
        variants: ['responsive'],
      }),
]

Adjustable, optional settings

  • animatedSpeed used for the animationDuration of the .animated class
  • heartBeat used for the animationDuration of the .heartBeat class
  • hingeSpeed used for the animationDuration of the .hingeSpeed class
  • bounceInSpeed used for the animationDuration of the .bounceInSpeed class
  • bounceOutSpeed used for the animationDuration of the .bounceOutSpeed class
  • animationDelaySpeed used for the animationDelaySpeed, just add .delay class to your element

All of these settings are optional, if not set basic animate.css fallback animationDuration speed is used.

The plugin generates all the animate.css utility classes for you.

Available Animate CSS classes

  • .animated
  • .infinite
  • .delay
  • .delay-1
  • .delay-2
  • .delay-3
  • .delay-4
  • .delay-5
  • .fast
  • .faster
  • .slow
  • .slower
  • .bounce
  • .flash
  • .pulse
  • .rubberBand
  • .shake
  • .headShakte
  • .swing
  • .tada
  • .wobble
  • .jello
  • .heartBeat
  • .hinge
  • .jackInTheBox
  • .lightSpeedIn
  • .lightSpeedOut
  • .flip
  • .flipInX
  • .flipInY
  • .flipOutX
  • .flipOutY
  • .rotateIn
  • .rotateInDownLeft
  • .rotateInDownRight
  • .rotateInUpLeft
  • .rotateInUpRight
  • .rotateOut
  • .rotateOutDownLeft
  • .rotateOutDownRight
  • .rotateOutUpLeft
  • .rotateOutUpRight
  • .rollIn
  • .rollOut
  • .zoomIn
  • .zoomInUp
  • .zoomInDown
  • .zoomInLeft
  • .zoomInRight
  • .bounceIn
  • .bounceInDown
  • .bounceInUp
  • .bounceInLeft
  • .bounceInRight
  • .bounceOut
  • .bounceOutDown
  • .bounceOutUp
  • .bounceOutLeft
  • .bounceOutRight
  • .slideInDown
  • .slideInLeft
  • .slideInRight
  • .slideInUp
  • .slideOutDown
  • .slideOutLeft
  • .slideOutRight
  • .slideOutUp
  • .fadeIn
  • .fadeInDown
  • .fadeInDownBig
  • .fadeInLeft
  • .fadeInLeftBig
  • .fadeInRight
  • .fadeInRightBig
  • .fadeInUp
  • .fadeInUpBig
  • .fadeOut
  • .fadeOutDown
  • .fadeOutDownBig
  • .fadeOutLeft
  • .fadeOutLeftBig
  • .fadeOutRight
  • .fadeOutRightBig
  • .fadeOutUp
  • .fadeOutUpBig
  • .zoomOutDown
  • .zoomOutLeft
  • .zoomOutRight
  • .zoomOut
  • .zoomOutUp

Credits

This package is based of Animate.css.

License

This project is licensed under the MIT License.