CSS Animations with Animate.css
Need to add some emphasis to an element on your webpage? Want to add some pizazz and a subtle wow factor? Look no further than Animate.css, an open-source library of ready-to-use, cross-browser animations for use in your web projects.
Animate.css allows you to dynamically manipulate HTML and CSS elements with a simple CDN link and class additions. It’s incredibly intuitive and easy to use. Simply add this to your code:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>After that, add the class animate__animated to any element you want, along with any of the animation names with the prefix of animate__ (always a double underscore).
<h1 class="animate__animated animate__bounce">An animated element</h1>And that’s it! You’ve got an animated element with very minimal code. There are plenty to pick from too! Here are some of the animation names from the attention seeker category you can pick from:
Attention seekers
- bounce
- flash
- pulse
- rubberBand
- shakeX
- shakeY
- headShake
- swing
- tada
- wobble
- jello
- heartBeat
Other animation categories include: back entrances/exits, bouncing entrances/exits, fading entrances/exits, flippers, lightspeed, rotating entrances/exits, zooming entrances/exits, and sliding entrances/exits. Each of these have numerous directions and modifications to pick from.
You can add delayed effects, either locally or globally by putting new values directly into CSS:
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* This changes all the animations globally */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}Speed of animations as well as repeating animations can be added to class attributes. Delayed effects can also be added directly into each element’s class attribute in HTML:
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>Using this library for the first time in a group project was wonderful. I highly recommend giving it a try for your next web project. An animated header, title, or navbar is a quick an easy thing to add to make your website pop.
