Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use pre-made CSS animations with Animate.css

Sunday, November 25th, 2018 by Servage

animate-cssAnimate.css is a CSS library that allows you to animate elements on a web page. It is very easy to set up and provides dozens of premade animations for you to use, such as bouncing, sliding and fading animations. Another great thing about Animate.css is that it does not use any JavaScript for animations. Everything is done with CSS in a single file.

Setting Up Animate.css

As promised above, setting up Animate.css is simple. You only need to include one CSS file that you can find on the official website: https://daneden.github.io/animate.css. Click the download link, save the file and include it in your HTML file using a <link> tag. Here is an example: <link rel=”stylesheet” href=”animate.min.css”>. You are now ready to start animating elements on the page!

Animating Elements

Fortunately, animating HTML elements is also easy. To animate something, add the CSS class “animated” to the element you want to animate. This class is required regardless of what kind of animation you want to play. Speaking of which, the next thing to do is decide which animation to play. You can find a list of all available animations on the website where you downloaded Animate.css. For example, if you want to add a simple bounce animation, add a class called “bounce” to the element. This will make the chosen element bounce when the page loads.

Advanced Use With jQuery

Adding animations to the page was quite straightforward. However, if you want to use animations in a more advanced way, here are some tips.

First of all, you may want to trigger animations when some action takes place. For example, you can make a button fade out and eventually disappear when it has been clicked. Because Animate.css is just a CSS file, it does not come with easy-to-use helper functions, such as an animate() function. This does not matter though, because animating elements with jQuery and vanilla JavaScript is simple.

To animate an element when something happens on a page, we can add the two classes we used earlier to some element the user is interacting with. We can use the onclick event listener and addClass() function of jQuery to achieve this. Let‘s imagine you have a button on your website that looks like this: <button class=”button” onclick=”animateMe();”>Animate me!</button>. Next, we will use a one-line jQuery function to animate the button when it is clicked: $(“.button”).addClass(“hinge animated”). Make sure to put this code inside the animateMe() function. The same result can be achieved with vanilla JavaScript, but we decided to go with jQuery for simplicity.

If you are looking for even more advanced use, such as animating an element multiple times or even infinitely, head to the official documentation for more information.

Use pre-made CSS animations with Animate.css, 3.3 out of 5 based on 4 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.