Changing or not declaring it might lead to unexpected results. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.Īnimation: bounce /* referring directly to the animation's declaration */Īnimation-duration: 2s /* don't forget to set a duration! */īe aware that some animations are dependent on the animation-timing property set on the animation's class. Using though the library provides you a few helper classes like the animated class to get you up running quickly, you can directly use the provided animations keyframes. Super!Īnimations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the best practices and gotchas sections to bring your web-things to life in the best way possible. 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 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |