Animation How to - Compare rotate, slide and fade animation

Question

We would like to know how to compare rotate, slide and fade animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h1 {<!--from   w w  w.j av a2  s .  c om-->
  z-index: 100;
}
.wrap {
  border: 2px solid #efefef;
  border-radius: 6px;
  position: absolute;
  overflow: hidden;
  z-index;
  90;
}

.box {
  float: left;
  color: #efefef;
  width: 80px;
  height: 80px;
  box-shadow: 3px 3px 5px #cccccc;
  padding: 12px;
  margin: 18px;
  border: 3px solid #333333;
  border-radius: 6px;
  background-color: #1a82f7;
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);
}
.rotator:hover {
  -webkit-animation: spin-the-box 5s infinite linear;
}

.fader:hover {
  -webkit-animation: fade-in-out 3s infinite linear;
}

.allOfThem {
  position: relative;
}

.allOfThem:hover {
  -webkit-animation: fade-in-out 3s infinite linear, spin-the-box 3s
    infinite linear, slide-up 3s linear infinite;
}

@-webkit-keyframes spin-the-box {
   from { -webkit-transform:rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes fade-in-out { 
   0% {opacity: 1;}
   50%{opacity:0;}
   100%{opacity:1;}
}
@-webkit-keyframes slide-up { 
   0% {top: 0;}
   50%{top:-50px;}
   100%{top:0;}
}
</style>
</head>
<body>
  <h1>hover over the boxes to animate</h1>
  <div class="wrap">
    <div class="box rotator">Rotator</div>
    <div class="box fader">Fader</div>
    <div class="box fader rotator">All of them!</div>
    <div class="box allOfThem">All of them, for real!</div>
  </div>
</body>
</html>

The code above is rendered as follows: