How to do CSS Animations with Animate.css

css-logo

One of the best parts about the CSS3 is the animations and transitions, they are something we didn't have in the past, which it was required usage of JavaScript. Because they are so important in modern web development, there are great CSS libraries out there, one of them is the Animate.css library. In this article, we will take a close look at how to do CSS animations with Animate.css.

How to use Animate.css

As we have mentioned in the article intro, Animate.css is a CSS library that comes with cross-browser built-in animations that you can implement in your projects very fast and with ease. To start using the Animate.css library, the first thing is to download it from the GitHub page, and load the file in your HTML document:

<link rel="stylesheet" href="css/animate.min.css">

As an alternative to Animate.css you can always do animations with JavaScript.

After this step, you will have access to every animation that is included in the library. To call an animation from the library on an element, you just need to give it the class animated space and then to put the name of the desired animation. You can find the list with the animation names here.

For example, to use the "bounce" animation, you just need to do the following:

<div class="animated bounce">Hello World</div>

After you reload the page, you will see that the div element which we added in our exercise that will complete the bounce animation. But what if we want to do something like animate elements when the button is clicked or after some particular action done by the user, in most of the cases we are adding animations after a particular event. For completing that you will need just a little JavaScript for triggering the click event and also adding the classes to the desired element.

For example, let's say that this is the HTML:

<button>Button</button>
<section>
Some random text...
</section>

What you want to do here is to animate the section using the fade animation, for example, when the user clicks on the button. To do this, first, you need to give it an opacity of 0, and after that, you just need to add the classes dynamically with JavaScript, like in code the example below:

$('button').click(function() {
  $('section').addClass('animated fadeInLeft');
});

You can also modify the speed of the animations in your CSS:

.animated {
  -webkit-animation-duration: 500ms;
  -moz-animation-duration: 500ms;
  animation-duration: 500ms;
}

It is also possible to change the delay time in the animation and the count of how many times it is played using the animation-delay and animation-iteration-count.

You can also perform animation for the transition out after the first animation ends. To do this you need to use the one event and attach it to the end of the animation and simply add the class of the animation we want to use. You can also add a delay class that will allow you to have a delay between fade in and fade out.

$('section').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
  $('section').addClass('delay fadeOutRight');
});

For the CSS part of the code you simply need to add:

.delay {
  -animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
}

After you refresh the page, you can see the fade-in animation, and after one second the fade-out animation too.

CSS animations in the Animate.css have cross-browser support for popular browsers.

Conclusion

For everyone that likes to use CSS animations, knowledge of Animate.css can be essential to make things easy, smooth and simple. You can find the Animate.css on GitHub here. Thanks for reading, if you find this article helpful please share it.




#css #html #animations

Author: Aleksandar Vasilevski |

Loading...