Animate CSS Tutorial

Posted on |

Animate CSS

Animate.css is a css library that has 75 different types of animation features, such as shake, slidein, and pulse. Here are some examples:

How to use it.

  1. Add the animate cdn to your header.
  2. Add animated and bounce to your class

For Example:

1
2
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
<h2 class="animated bounce"> Hello World! </h2>

Here How I used it in my Tic Tac Toe Project

In my tictactoe project I want animation when the button is click and remove theclasses after animation ends. After watching Wes Bos tutorial, Here’s what I came up with

HTML:

1
<td id="cellSeven" onclick="handlers.animate(this);"></td>

JS:

1
2
3
4
5
6
7
8
9
handlers = {
  animate: function(e){
    var animationName = 'animated shake';
    var animationEnd = 'webkitanimationend mozanimationend msanimationend oanimationend animationend'
    $(e).addClass(animationName)
      .one(animationEnd, function(){
      $(this).removeClass('animated shake');
  });
}

References