CSS Animations

by Abid Shaik

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<!--**************CSS Animations**************-->
<div class="container">
  <h1>
Mouse Over to see animation 
</h1>
  <div class="row">
    <div class="box red ">
      RED
    </div>
    <div class="box blue">
      BLUE
    </div>
    <div class="box green">
      GREEN
    </div>
    <div class='box panthersBlue animated bounce'>bounce </div>
    <div class='box panthersBlue animated flash'>flash </div>
    <div class='box panthersBlue animated pulse'>pulse </div>
    <div class='box panthersBlue animated rubberBand'>rubberBand </div>
    <div class='box panthersBlue animated shake'>shake </div>
    <div class='box panthersBlue animated headShake'>headShake </div>
    <div class='box panthersBlue animated swing'>swing </div>
    <div class='box panthersBlue animated tada'>tada </div>
    <div class='box panthersBlue animated wobble'>wobble </div>
    <div class='box panthersBlue animated jello'>jello </div>
    <div class='box panthersBlue animated bounceIn'>bounceIn </div>
    <div class='box panthersBlue animated bounceInDown'>bounceInDown </div>
    <div class='box panthersBlue animated bounceInLeft'>bounceInLeft </div>
    <div class='box panthersBlue animated bounceInRight'>bounceInRight </div>
    <div class='box panthersBlue animated bounceInUp'>bounceInUp </div>
    <div class='box panthersBlue animated bounceOut infinite'>bounceOut </div>
    <div class='box panthersBlue animated bounceOutDown infinite'>bounceOutDown </div>
    <div class='box panthersBlue animated bounceOutLeft infinite'>bounceOutLeft </div>
    <div class='box panthersBlue animated bounceOutRight infinite'>bounceOutRight </div>
    <div class='box panthersBlue animated bounceOutUp infinite'>bounceOutUp </div>
    <div class='box panthersBlue animated fadeIn'>fadeIn </div>
    <div class='box panthersBlue animated fadeInDown'>fadeInDown </div>
    <div class='box panthersBlue animated...

CSS

.box {
  height: 150px;
  width: 150px;
  display: inline;
  float: left;
  margin: 10px;
  color: white;
  Letter-spacing: 4px;
  line-height: 2;
  text-align: center;
  -webkit-animation-duration: 2s;
   -webkit-animation-delay: 2s;
}
.fadeIn{
    -webkit-animation-duration: 3s;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.panthersBlue {
  background-color: #0088CE;
}

@media (max-width: 480px) {
  .box {
    height: 10px;
    width: 10px;
  }
}

JavaScript

$(document).ready(function() {
  $(".box").on("mouseover", function(event) {
    $(".box").removeClass("infinite");
    $(this).addClass("infinite");
  });
  $(".box").on("mouseleave", function(event) {
    $(".box").removeClass("infinite");
  });


});