Animation CSS3 : Instructions

First you need a prefixer.less and add the following code inside the file:

//.transform-origin(@args)

.transform-origin(@percent){
  -webkit-transform: @percent;
  -moz-transform: @percent;
  -ms-transform: @percent;
  -o-transform: @percent;
  transform: @percent;
}

here are the list of animation you can do:

-slideUp 
-slideDown 
-slideLeft  
-slideRight 
-slideExpand Up 
-expandUp 	 
-fadeIn 
-expandOpen	 
-bigEntrance
-hatch

-bounce 
-pulse	 
-floating	 
-tossing 
-pullUp	 
-pullDown 
-stretchLeft
-stretchRight


How to use:

Just add the class name:Example:<div id="box" class="pulse"></div>

animations

@import 'prefixer.less';

.slideDown{
  .animation(1s ease slideDown);
  visibility: visible !important;
}

.slideDownFrames(){
  0% {.transform(translateY(-100%));}
  50%{.transform(translateY(8%));}
  65%{.transform(translateY(-4%));}
  80%{.transform(translateY(4%));}
  95%{.transform(translateY(-2%));}
  100% {.transform(translateY(0%));}
}

@-webkit-keyframes slideDown {.slideDownFrames;}
@-moz-keyframes slideDown {.slideDownFrames;}
@-ms-keyframes slideDown {.slideDownFrames;}
@-o-keyframes slideDown {.slideDownFrames;}
@keyframes slideDown {.slideDownFrames;}


.slideUp{
  .animation(1s ease slideUp);
  visibility: visible !important;
}

.slideUpFrames(){
  0% {.transform(translateY(100%));}
  50%{.transform(translateY(-8%));}
  65%{.transform(translateY(4%));}
  80%{.transform(translateY(-4%));}
  95%{.transform(translateY(2%));}
  100% {.transform(translateY(0%));}
}

@-webkit-keyframes slideUp {.slideUpFrames;}
@-moz-keyframes slideUp {.slideUpFrames;}
@-ms-keyframes slideUp {.slideUpFrames;}
@-o-keyframes slideUp {.slideUpFrames;}
@keyframes slideUp {.slideUpFrames;}


.slideLeft{
  .animation(1s ease-in-out slideLeft);
  visibility: visible !important;
}


.slideLeftFrames(){
  0% {.transform(translateX(150%));}
  50%{.transform(translateX(8%));}
  65%{.transform(translateX(-4%));}
  80%{.transform(translateX(4%));}
  95%{.transform(translateX(-2%));}
  100% {.transform(translateX(0%));}
}

@-webkit-keyframes slideLeft {.slideLeftFrames;}
@-moz-keyframes slideLeft {.slideLeftFrames;}
@-ms-keyframes slideLeft {.slideLeftFrames;}
@-o-keyframes slideLeft {.slideLeftFrames;}
@keyframes slideLeft {.slideLeftFrames;}


.slideRight{
  .animation(1s ease-in-out slideRight);
  visibility: visible !important;
}

.slideRightFrames(){
  0% {.transform(translateX(-150%));}
  50%{.transform(translateX(8%));}
  65%{.transform(translateX(-4%));}
  80%{.transform(translateX(4%));}
  95%{.transform(translateX(-2%));}
  100% {.transform(translateX(0%));}
}

@-webkit-keyframes slideRight {.slideRightFrames;}
@-moz-keyframes slideRight {.slideRightFrames;}
@-ms-keyframes slideRight {.slideRightFrames;}
@-o-keyframes slideRight {.slideRightFrames;}
@keyframes slideRight {.slideRightFrames;}

.slideExpandUp{
  .animation(1.6s ease-out slideExpandUp);
  visibility: visible !important;
}

.slideExpandUpFrames(){
  0% {.transform(translateY(100%) scaleX(0.5));}
  30%{.transform(translateY(-8%) scaleX(0.5));}
  40%{.transform(translateY(2%) scaleX(0.5));}
  50%{.transform(translateY(0%) scaleX(1.1));}
  60%{.transform(translateY(0%) scaleX(0.9));}
  70% {.transform(translateY(0%) scaleX(1.05));}
  80%{.transform(translateY(0%) scaleX(0.95));}
  90% {.transform(translateY(0%) scaleX(1.02));}
  100%{.transform(translateY(0%) scaleX(1));}
}

@-webkit-keyframes slideExpandUp {.slideExpandUpFrames;}
@-moz-keyframes slideExpandUp {.slideExpandUpFrames;}
@-ms-keyframes slideExpandUp {.slideExpandUpFrames;}
@-o-keyframes slideExpandUp {.slideExpandUpFrames;}
@keyframes slideExpandUp {.slideExpandUpFrames;}


.expandUp{
  .animation(0.7s ease expandUp);
  visibility: visible !important;
}

.expandUpFrames{
  0% {.transform(translateY(100%) scale(0.6) scaleY(0.5));}
  60%{.transform(translateY(-7%) scaleY(1.12));}
  75%{.transform(translateY(3%));}
  100% {.transform(translateY(0%) scale(1) scaleY(1));}
}

@-webkit-keyframes expandUp {.expandUpFrames;}
@-moz-keyframes expandUp {.expandUpFrames;}
@-ms-keyframes expandUp {.expandUpFrames;}
@-o-keyframes expandUp {.expandUpFrames;}
@keyframes expandUp {.expandUpFrames;}


.fadeIn{
  .animation(1.5s ease-in-out fadeIn);
  visibility: visible !important;
}

.fadeInFrames {
  0% {.transform(scale(0)); .opacity(0.0);}
  60% {.transform(scale(1.1));}
  80% {.transform(scale(0.9));.opacity(1);}
  100% {.transform(scale(1));.opacity(1);}
}

@-webkit-keyframes fadeIn {.fadeInFrames;}
@-moz-keyframes fadeIn {.fadeInFrames;}
@-ms-keyframes fadeIn {.fadeInFrames;}
@-o-keyframes fadeIn {.fadeInFrames;}
@keyframes fadeIn {.fadeInFrames;}


.expandOpen{
  .animation(1.2s ease-out expandOpen);
  visibility: visible !important;
}

.expandOpenFrames {
  0% {.transform(scale(1.8));}
  50% {.transform(scale(0.95));}
  80% {.transform(scale(1.05));}
  90% {.transform(scale(0.98));}
  100% {.transform(scale(1));}
}

@-webkit-keyframes expandOpen {.expandOpenFrames;}
@-moz-keyframes expandOpen {.expandOpenFrames;}
@-ms-keyframes expandOpen {.expandOpenFrames;}
@-o-keyframes expandOpen {.expandOpenFrames;}
@keyframes expandOpen {.expandOpenFrames;}


.bigEntrance{
  .animation(1.6s ease-out bigEntrance);
  visibility: visible !important;
}

.bigEntranceFrames {
  0% {
    .transform(scale(0.3) rotate(6deg) translateX(-30%) translateY(30%));
    .opacity(0.2);
  }
  30% {
    .transform(scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%));
    .opacity(1);
  }
  45% {
    .transform(scale(0.98) rotate(1deg) translateX(0%) translateY(0%));
    .opacity(1);
  }
  60% {
    .transform(scale(1.01) rotate(-1deg) translateX(0%) translateY(0%));
    .opacity(1);
  }
  75% {
    .transform(scale(0.99) rotate(1deg) translateX(0%) translateY(0%));
    .opacity(1);
  }
  90% {
    .transform(scale(1.01) rotate(0deg) translateX(0%) translateY(0%));
    .opacity(1);
  }
  100% {
    .transform(scale(1) rotate(0deg) translateX(0%) translateY(0%));
    .opacity(1);
  }
}

@-webkit-keyframes bigEntrance {.bigEntranceFrames;}
@-moz-keyframes bigEntrance {.bigEntranceFrames;}
@-ms-keyframes bigEntrance {.bigEntranceFrames;}
@-o-keyframes bigEntrance {.bigEntranceFrames;}
@keyframes bigEntrance {.bigEntranceFrames;}



.hatch{
  .animation(2s ease-in-out hatch);
  visibility: visible !important;
}

.hatchFrames {
  0% {
    .transform(rotate(0deg) scaleY(0.6));
  }
  20% {
    .transform(rotate(-2deg) scaleY(1.05));
  }
  35% {
    .transform(rotate(2deg) scaleY(1));
  }
  50% {
    .transform(rotate(-2deg));
  }
  65% {
    .transform(rotate(1deg));
  }
  80% {
    .transform(rotate(-1deg));
  }
  100% {
    .transform(rotate(0deg));
  }
}

@-webkit-keyframes hatch{.hatchFrames;}
@-moz-keyframes hatch {.hatchFrames;}
@-ms-keyframes hatch {.hatchFrames;}
@-o-keyframes hatch {.hatchFrames;}
@keyframes hatch {.hatchFrames;}

.bounce{
  .animation(1.6s ease bounce);
  .transform-origin(50% 100%);
}

.bounceFrames {
  0% {
    .transform(translateY(0%) scaleY(0.6));
  }
  60%{
    .transform(translateY(-100%) scaleY(1.1));
  }
  70%{
    .transform(translateY(0%) scaleY(0.95) scaleX(1.05));
  }
  80%{
    .transform(translateY(0%) scaleY(1.05) scaleX(1));
  }
  90%{
    .transform(translateY(0%) scaleY(0.95) scaleX(1));
  }
  100%{
    .transform(translateY(0%) scaleY(1) scaleX(1));
  }
}

@-webkit-keyframes bounce{.bounceFrames;}
@-moz-keyframes bounce {.bounceFrames;}
@-ms-keyframes bounce {.bounceFrames;}
@-o-keyframes bounce {.bounceFrames;}
@keyframes bounce {.bounceFrames;}


.pulse{
  .animation(1.5s infinite pulse);
}

.pulseFrames {
  0% {
    .transform(scale(0.9));
    .opacity(0.7);
  }
  50% {
    .transform(scale(1));
    .opacity(1);
  }
  100% {
    .transform(scale(0.9));
    .opacity(0.7);
  }
}

@-webkit-keyframes pulse{.pulseFrames;}
@-moz-keyframes pulse {.pulseFrames;}
@-ms-keyframes pulse {.pulseFrames;}
@-o-keyframes pulse {.pulseFrames;}
@keyframes pulse {.pulseFrames;}


.floating{
  .animation(1.5s infinite floating);
}

.floatingFrames {
  0% {
    .transform(translateY(0%));
  }
  50% {
    .transform(translateY(8%));
  }
  100% {
    .transform(translateY(0%));
  }
}

@-webkit-keyframes floating {.floatingFrames;}
@-moz-keyframes floating {.floatingFrames;}
@-ms-keyframes floating {.floatingFrames;}
@-o-keyframes floating {.floatingFrames;}
@keyframes floating {.floatingFrames;}

.tossing{
  .animation(2.5s infinite tossing);
}

.tossingFrames {
  0% {
    .transform(rotate(-4deg));
  }
  50% {
    .transform(rotate(4deg));
  }
  100% {
    .transform(rotate(-4deg));
  }
}

@-webkit-keyframes tossing {.tossingFrames;}
@-moz-keyframes tossing {.tossingFrames;}
@-ms-keyframes tossing {.tossingFrames;}
@-o-keyframes tossing {.tossingFrames;}
@keyframes tossing {.tossingFrames;}

.pullUp{
  .animation(1.1s ease-out pullUp);
  .transform-origin(50% 100%);
}

.pullUpFrames {
  0% {
    .transform(scaleY(0.1));
  }
  40% {
    .transform(scaleY(1.02));
  }
  60% {
    .transform(scaleY(0.98));
  }
  80% {
    .transform(scaleY(1.01));
  }
  100% {
    .transform(scaleY(0.98));
  }
  80% {
    .transform(scaleY(1.01));
  }
  100% {
    .transform(scaleY(1));
  }
}

@-webkit-keyframes pullUp {.pullUpFrames;}
@-moz-keyframes pullUp {.pullUpFrames;}
@-ms-keyframes pullUP {.pullUpFrames;}
@-o-keyframes pullUp {.pullUpFrames;}
@keyframes pullUp {.pullUpFrames;}


.pullDown{
  .animation(1.1s ease-out pullDown);
  .transform-origin(50% 0%);
}

.pullDownFrames {
  0% {
    .transform(scaleY(0.1));
  }
  40% {
    .transform(scaleY(1.02));
  }
  60% {
    .transform(scaleY(0.98));
  }
  80% {
    .transform(scaleY(1.01));
  }
  100% {
    .transform(scaleY(0.98));
  }
  80% {
    .transform(scaleY(1.01));
  }
  100% {
    .transform(scaleY(1));
  }
}

@-webkit-keyframes pullDown {.pullDownFrames;}
@-moz-keyframes pullDown {.pullDownFrames;}
@-ms-keyframes pullDown {.pullDownFrames;}
@-o-keyframes pullDown {.pullDownFrames;}
@keyframes pullDown {.pullDownFrames;}

.stretchLeft{
  .animation(1.5s ease-out stretchLeft);
  .transform(100% 0%);
}

.stretchLeftFrames {
  0% {
    .transform(scaleX(0.3));
  }
  40% {
    .transform(scaleX(1.02));
  }
  60% {
    .transform(scaleX(0.98));
  }
  80% {
    .transform(scaleX(1.01));
  }
  100% {
    .transform(scaleX(0.98));
  }
  80% {
    .transform(scaleX(1.01));
  }
  100% {
    .transform(scaleX(1));
  }
}

@-webkit-keyframes stretchLeft {.stretchLeftFrames;}
@-moz-keyframes stretchLeft {.stretchLeftFrames;}
@-ms-keyframes stretchLeft {.stretchLeftFrames;}
@-o-keyframes stretchLeft {.stretchLeftFrames;}
@keyframes stretchLeft {.stretchLeftFrames;}

.stretchRight{
  .animation(1.5s ease-out stretchRight);
  .transform-origin(0% 0%);

}

.stretchRightFrames {
  0% {
    .transform(scaleX(0.3));
  }
  40% {
    .transform(scaleX(1.02));
  }
  60% {
    .transform(scaleX(0.98));
  }
  80% {
    .transform(scaleX(1.01));
  }
  100% {
    .transform(scaleX(0.98));
  }
  80% {
    .transform(scaleX(1.01));
  }
  100% {
    .transform(scaleX(1));
  }
}

@-webkit-keyframes stretchRight {.stretchRightFrames;}
@-moz-keyframes stretchRight {.stretchRightFrames;}
@-ms-keyframes stretchRight {.stretchRightFrames;}
@-o-keyframes stretchRight {.stretchRightFrames;}
@keyframes stretchRight {.stretchRightFrames;}