css3 ANIMATIONS

by secretgspot

HTML

<article>
<h2>A_rotateR</h2>
<div class="ball A_rotateR A_transition_easeIn">Oo</div>
<div class="ball A_rotateR A_transition_easeOut">Oo</div>
</article>

<article>
<h2>A_rotateL</h2>
<div class="ball A_rotateL A_transition_easeIn">Oo</div>
<div class="ball A_rotateL A_transition_easeOut">Oo</div>
<div class="ball A_rotateL A_transition_easeIn A_origin_br">Oo</div>
</article>


<article>
<h2>A_bounce</h2>
<div class="ball A_bounce A_transition_easeIn">Oo</div>
<div class="ball A_bounce A_transition_easeOut">Oo</div>
</article>

<article>
<h2>A_swing</h2>
<div class="ball A_swing A_count_0 A_time_1s A_transition_liner">Oo</div>
<div class="ball A_swing A_count_10 A_time_1s A_transition_easeIn">Oo</div>
</article>

<article>
<h2>A_zoomIn</h2>
<div class="ball A_zoomIn">Oo</div>
<div class="ball A_zoomIn A_count_4 A_time_2s A_transition_liner">Oo</div>
</article>

<article>
<h2>A_zoomOut</h2>
<div class="ball A_zoomOut">Oo</div>
<div class="ball A_zoomOut A_count_4 A_time_2s A_transition_liner">Oo</div>
</article>

CSS

.ball{
  display:inline-block;
  width:40px;
  height:40px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  background:#000;
  color:#fff;
  line-height:40px;
  text-align: center;
}
article{
  display:inline-block;
  width: 40%;
} 
/*
 * single class
 */
.A_bounce{
  position: relative;
  top: 0;
  -webkit-animation-name: A_func_bounce;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-direction:normal;
}
.A_swing{
  position: relative;
  -webkit-animation-name: A_func_swing;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  -webkit-transform:rotate(0deg);
  -webkit-animation-direction:normal;
  -webkit-transform-origin:bottom center;
}
.A_zoomIn{
  -webkit-transform:scale(1);
  -webkit-animation-name: A_func_zoomIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
 -webkit-animation-direction:normal;
  -webkit-transform-origin:center center;
}
.A_zoomOut{
  -webkit-transform:scale(1);
  -webkit-animation-name: A_func_zoomOut;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
 -webkit-animation-direction:normal;
  -webkit-transform-origin:center center;
}
.A_rotateR,.A_rotateL{
  -webkit-transform:rotate(0deg);
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-direction:normal;
  -webkit-transform-origin:center center;
}
.A_rotateR{
  -webkit-animation-name: A_func_rotateR;
}
.A_rotateL{
  -webkit-animation-name: A_func_rotateL;
}
/*
 * mixed class
 */
.A_bounce.A_swing{
  -webkit-animation-name: A_func_swing,A_func_bounce;
}

/*
 * transform origin
 * center top right bottom left
...