@windicss/plugin-animations
v1.0.9
Published
Add Animate CSS as Windi CSS plugin to your project.
Downloads
4,626
Readme
@windicss/plugin-animations
Add Animate CSS as Windi CSS plugin to your project. This plugin is modified based on tailwind-animate.css to adapt to Windi CSS.
Installation
npm install --save-dev @windicss/animations
Usage
// tailwind.config.js
plugins: [
// Other plugins
require('@windicss/animations')({
settings: {
animatedSpeed: 1000,
heartBeatSpeed: 1000,
hingeSpeed: 2000,
bounceInSpeed: 750,
bounceOutSpeed: 750,
animationDelaySpeed: 1000
},
}),
]
Available Animate CSS classes
- .animate-animated
- .animate-infinite
- .animate-delay
- .animate-delay-1s
- .animate-delay-2s
- .animate-delay-3s
- .animate-delay-4s
- .animate-delay-5s
- .animate-fast
- .animate-faster
- .animate-slow
- .animate-slower
- .animate-bounce
- .animate-flash
- .animate-pulse
- .animate-rubberBand
- .animate-shakeY
- .animate-shakeX
- .animate-headShake
- .animate-swing
- .animate-tada
- .animate-wobble
- .animate-jello
- .animate-heartBeat
- .animate-hinge
- .animate-jackInTheBox
- .animate-lightSpeedIn
- .animate-lightSpeedOut
- .animate-flip
- .animate-flipInX
- .animate-flipInY
- .animate-flipOutX
- .animate-flipOutY
- .animate-rotateIn
- .animate-rotateInDownLeft
- .animate-rotateInDownRight
- .animate-rotateInUpLeft
- .animate-rotateInUpRight
- .animate-rotateOut
- .animate-rotateOutDownLeft
- .animate-rotateOutDownRight
- .animate-rotateOutUpLeft
- .animate-rotateOutUpRight
- .animate-rollIn
- .animate-rollOut
- .animate-zoomIn
- .animate-zoomInUp
- .animate-zoomInDown
- .animate-zoomInLeft
- .animate-zoomInRight
- .animate-bounceIn
- .animate-bounceInDown
- .animate-bounceInUp
- .animate-bounceInLeft
- .animate-bounceInRight
- .animate-bounceOut
- .animate-bounceOutDown
- .animate-bounceOutUp
- .animate-bounceOutLeft
- .animate-bounceOutRight
- .animate-slideInDown
- .animate-slideInLeft
- .animate-slideInRight
- .animate-slideInUp
- .animate-slideOutDown
- .animate-slideOutLeft
- .animate-slideOutRight
- .animate-slideOutUp
- .animate-fadeIn
- .animate-fadeInDown
- .animate-fadeInDownBig
- .animate-fadeInLeft
- .animate-fadeInLeftBig
- .animate-fadeInRight
- .animate-fadeInRightBig
- .animate-fadeInUp
- .animate-fadeInUpBig
- .animate-fadeInTopLeft
- .animate-fadeInTopRight
- .animate-fadeInBottomLeft
- .animate-fadeInBottomRight
- .animate-fadeOut
- .animate-fadeOutDown
- .animate-fadeOutDownBig
- .animate-fadeOutLeft
- .animate-fadeOutLeftBig
- .animate-fadeOutRight
- .animate-fadeOutRightBig
- .animate-fadeOutUp
- .animate-fadeOutUpBig
- .animate-fadeOutTopLeft
- .animate-fadeOutTopRight
- .animate-fadeOutBottomLeft
- .animate-fadeOutBottomRight
- .animate-zoomOutDown
- .animate-zoomOutLeft
- .animate-zoomOutRight
- .animate-zoomOut
- .animate-zoomOutUp
- .animate-lightSpeedInRight
- .animate-lightSpeedInLeft
- .animate-lightSpeedOutRight
- .animate-lightSpeedOutLeft
- .animate-backInDown
- .animate-backInUp
- .animate-backInLeft
- .animate-backInRight
- .animate-backOutDown
- .animate-backOutUp
- .animate-backOutLeft
- .animate-backOutRight
Credits
This package is based on awesome Animate.css.
License
This project is licensed under the MIT License.