Animation composer presets install#

That's it! You've got a CSS animated element. Or add it directly to your webpage using a CDN: Īfter installing Animate.css, add the class animate_animated to an element, along with any of the animation names (don't forget the animate_ prefix!): An animated element Import it into your file: import 'animate.css' If you are not using any tool for packing or bundling your code, you can simply use the CDN method below): $ yarn add animate.css

Animation composer presets install#

Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. Install with npm: $ npm install animate.css -save Great for emphasis, home pages, sliders, and attention-guiding hints.Įdit this on GitHub Installation and Usage Installing slideOutUp Copy class name to clipboardĪnimate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under.Īnimate.css is a library of ready-to-use, cross-browser animations for use in your web projects.slideOutRight Copy class name to clipboard.slideOutLeft Copy class name to clipboard.slideOutDown Copy class name to clipboard.slideInRight Copy class name to clipboard.slideInLeft Copy class name to clipboard.slideInDown Copy class name to clipboard.zoomOutRight Copy class name to clipboard.zoomOutLeft Copy class name to clipboard.zoomOutDown Copy class name to clipboard.zoomInRight Copy class name to clipboard.zoomInLeft Copy class name to clipboard.zoomInDown Copy class name to clipboard.jackInTheBox Copy class name to clipboard.rotateOutUpRight Copy class name to clipboard.rotateOutUpLeft Copy class name to clipboard.rotateOutDownRight Copy class name to clipboard.rotateOutDownLeft Copy class name to clipboard.rotateInUpRight Copy class name to clipboard.rotateInUpLeft Copy class name to clipboard.rotateInDownRight Copy class name to clipboard.rotateInDownLeft Copy class name to clipboard.lightSpeedOutLeft Copy class name to clipboard.lightSpeedOutRight Copy class name to clipboard.lightSpeedInLeft Copy class name to clipboard.lightSpeedInRight Copy class name to clipboard.fadeOutBottomLeft Copy class name to clipboard.fadeOutBottomRight Copy class name to clipboard.fadeOutTopRight Copy class name to clipboard.fadeOutTopLeft Copy class name to clipboard.fadeOutUpBig Copy class name to clipboard.fadeOutRightBig Copy class name to clipboard.fadeOutRight Copy class name to clipboard.fadeOutLeftBig Copy class name to clipboard.fadeOutLeft Copy class name to clipboard.fadeOutDownBig Copy class name to clipboard.fadeOutDown Copy class name to clipboard.fadeInBottomRight Copy class name to clipboard.fadeInBottomLeft Copy class name to clipboard.fadeInTopRight Copy class name to clipboard.fadeInTopLeft Copy class name to clipboard.fadeInUpBig Copy class name to clipboard.fadeInRightBig Copy class name to clipboard.fadeInRight Copy class name to clipboard.fadeInLeftBig Copy class name to clipboard.fadeInLeft Copy class name to clipboard.fadeInDownBig Copy class name to clipboard.fadeInDown Copy class name to clipboard.bounceOutUp Copy class name to clipboard.bounceOutRight Copy class name to clipboard.bounceOutLeft Copy class name to clipboard.bounceOutDown Copy class name to clipboard.bounceInUp Copy class name to clipboard.bounceInRight Copy class name to clipboard.bounceInLeft Copy class name to clipboard.bounceInDown Copy class name to clipboard.backOutRight Copy class name to clipboard.

backOutLeft Copy class name to clipboard.backOutDown Copy class name to clipboard.backInRight Copy class name to clipboard.backInLeft Copy class name to clipboard.backInDown Copy class name to clipboard.rubberBand Copy class name to clipboard.See animations Close list Attention seekers Animate.css Just-add-water CSS animations Animate.css | A cross-browser library of CSS animations.