code:
// Fade Animation

// Fade simple
.fade{
  animation: fadeAnim ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeAnim ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeAnim ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeAnim ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeAnim ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fadeAnim{
  0% {
    opacity:0;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-moz-keyframes fadeAnim{
  0% {
    opacity:0;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -moz-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:1;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes fadeAnim {
  0% {
    opacity:0;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -webkit-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-o-keyframes fadeAnim {
  0% {
    opacity:0;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -o-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:1;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes fadeAnim {
  0% {
    opacity:0;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -ms-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:1;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

//Fade Out
.fadeOut {
  animation: fadeOutAnim ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeOutAnim ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeOutAnim ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeOutAnim ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeOutAnim ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fadeOutAnim{
  0% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:0;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-moz-keyframes fadeOutAnim{
  0% {
    opacity:1;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -moz-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:0;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes fadeOutAnim {
  0% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -webkit-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-o-keyframes fadeOutAnim {
  0% {
    opacity:1;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -o-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:0;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes fadeOutAnim {
  0% {
    opacity:1;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    opacity:0.52;
    -ms-transform:  scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    opacity:0;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

// Fade Out Right
.fadeRightOut{
  animation: fadeRightOut ease 3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeRightOut ease 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeRightOut ease 3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeRightOut ease 3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeRightOut ease 3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fadeRightOut{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    transform:  translate(19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    transform:  translate(59px,0px)  ;
  }
  100% {
    opacity:0;
    transform:  translate(200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-moz-keyframes fadeRightOut{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -moz-transform:  translate(19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -moz-transform:  translate(59px,0px)  ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-webkit-keyframes fadeRightOut {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -webkit-transform:  translate(19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -webkit-transform:  translate(59px,0px)  ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-o-keyframes fadeRightOut {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -o-transform:  translate(19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -o-transform:  translate(59px,0px)  ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-ms-keyframes fadeRightOut {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -ms-transform:  translate(19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -ms-transform:  translate(59px,0px)  ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

// Fade left Out
.fadeLeftOut{
  animation: fadeLeftOut ease 3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeLeftOut ease 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeLeftOut ease 3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeLeftOut ease 3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeLeftOut ease 3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fadeLeftOut{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    transform:  translate(-19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    transform:  translate(-59px,0px)  ;
  }
  100% {
    opacity:0;
    transform:  translate(-200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-moz-keyframes fadeLeftOut{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -moz-transform:  translate(-19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -moz-transform:  translate(-59px,0px)  ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(-200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-webkit-keyframes fadeLeftOut {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -webkit-transform:  translate(-19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -webkit-transform:  translate(-59px,0px)  ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(-200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-o-keyframes fadeLeftOut {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -o-transform:  translate(-19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -o-transform:  translate(-59px,0px)  ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(-200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

@-ms-keyframes fadeLeftOut {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    opacity:0.5;
    -ms-transform:  translate(-19px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
  20% {
    opacity:0;
    -ms-transform:  translate(-59px,0px)  ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(-200px,0px)  scaleX(1.30) scaleY(1.30) ;
  }
}

// Fade Down
.fadeDown{
  animation: fadeDown ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fadeDown ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: fadeDown ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fadeDown ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fadeDown ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fadeDown{
  0% {
    opacity:0;
    transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes fadeDown{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes fadeDown {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes fadeDown {
  0% {
    opacity:0;
    -o-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes fadeDown {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}

// Fade Down Out
.fadeDownOut{
  animation: fadeDownOut ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fadeDownOut ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: fadeDownOut ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fadeDownOut ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fadeDownOut ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fadeDownOut{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
  10% {
    opacity:0.6777369479537847;
    transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:0.6;
    transform:  translate(0px,7px)  ;
  }
  100% {
    opacity:0;
    transform:  translate(0px,60px)  ;
  }
}

@-moz-keyframes fadeDownOut{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
  10% {
    opacity:0.6777369479537847;
    -moz-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:0.6;
    -moz-transform:  translate(0px,7px)  ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(0px,60px)  ;
  }
}

@-webkit-keyframes fadeDownOut {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
  10% {
    opacity:0.6777369479537847;
    -webkit-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:0.6;
    -webkit-transform:  translate(0px,7px)  ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(0px,60px)  ;
  }
}

@-o-keyframes fadeDownOut {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
  10% {
    opacity:0.6777369479537847;
    -o-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:0.6;
    -o-transform:  translate(0px,7px)  ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(0px,60px)  ;
  }
}

@-ms-keyframes fadeDownOut {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
  10% {
    opacity:0.6777369479537847;
    -ms-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:0.6;
    -ms-transform:  translate(0px,7px)  ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(0px,60px)  ;
  }
}

// Fade up
.fadeUp{
  animation: fadeUpAnim ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fadeUpAnim ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: fadeUpAnim ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fadeUpAnim ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fadeUpAnim ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fadeUpAnim{
  0% {
    opacity:0;
    transform:  translate(0px,200px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes fadeUpAnim{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,200px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes fadeUpAnim {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,200px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes fadeUpAnim {
  0% {
    opacity:0;
    -o-transform:  translate(0px,200px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes fadeUpAnim {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,200px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}

// Fade Up Out
.fadeUpOut{
  animation: fadeUpOutAnim ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fadeUpOutAnim ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: fadeUpOutAnim ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fadeUpOutAnim ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fadeUpOutAnim ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fadeUpOutAnim{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
  100% {
    opacity:0;
    transform:  translate(0px,-200px)  ;
  }
}

@-moz-keyframes fadeUpOutAnim{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(0px,-200px)  ;
  }
}

@-webkit-keyframes fadeUpOutAnim {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(0px,-200px)  ;
  }
}

@-o-keyframes fadeUpOutAnim {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(0px,-200px)  ;
  }
}

@-ms-keyframes fadeUpOutAnim {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(0px,-200px)  ;
  }
}


code:
// Flash animation
.flash{
  animation: flashAnim linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: flashAnim linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: flashAnim linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: flashAnim linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: flashAnim linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes flashAnim{
  0% {
    opacity:1;
  }
  28% {
    opacity:0;
  }
  50% {
    opacity:0.91;
  }
  74% {
    opacity:0.18;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes flashAnim{
  0% {
    opacity:1;
  }
  28% {
    opacity:0;
  }
  50% {
    opacity:0.91;
  }
  74% {
    opacity:0.18;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes flashAnim {
  0% {
    opacity:1;
  }
  28% {
    opacity:0;
  }
  50% {
    opacity:0.91;
  }
  74% {
    opacity:0.18;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes flashAnim {
  0% {
    opacity:1;
  }
  28% {
    opacity:0;
  }
  50% {
    opacity:0.91;
  }
  74% {
    opacity:0.18;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes flashAnim {
  0% {
    opacity:1;
  }
  28% {
    opacity:0;
  }
  50% {
    opacity:0.91;
  }
  74% {
    opacity:0.18;
  }
  100% {
    opacity:1;
  }
}

license: mit


code:
// Global Prefix -------------------------------
// ---------------------------------------------

.hexa {
	animation-duration: 1s;
    animation-fill-mode: both;
}

// Add Class noStop to infinite animation
.hexa.noStop {
  animation-iteration-count: infinite; // Specifies that the animation should be played infinite times (for ever)
}
// defines how many times an animation should be played.
.hexa.x2 {
   animation-iteration-count: 2;
   -webkit-animation-iteration-count: 2;
   -moz-animation-iteration-count: 2;
   -o-animation-iteration-count: 2;
   -ms-animation-iteration-count: 2;
}

.hexa.x3 {
   animation-iteration-count: 3;
   -webkit-animation-iteration-count: 3;
   -moz-animation-iteration-count: 3;
   -o-animation-iteration-count: 3;
   -ms-animation-iteration-count: 3;
}

.hexa.x4 {
   animation-iteration-count: 4;
   -webkit-animation-iteration-count: 4;
   -moz-animation-iteration-count: 4;
   -o-animation-iteration-count: 4;
   -ms-animation-iteration-count: 4;
}


code:
// Groove Animation

// Groove
.groove{
  animation: grooveAnim ease 1s;
  animation-iteration-count: 1;
  transform-origin: 0% 0%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: grooveAnim ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 0% 0%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: grooveAnim ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 0% 0%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: grooveAnim ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 0% 0%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: grooveAnim ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 0% 0%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes grooveAnim{
  0% {
    transform:  rotate(0deg) ;
  }
  20% {
    transform:  rotate(60deg) ;
  }
  40% {
    transform:  rotate(40deg) ;
  }
  60% {
    transform:  rotate(54deg) ;
  }
  80% {
    transform:  rotate(42deg) ;
  }
  100% {
    transform:  rotate(46deg) ;
  }
}

@-moz-keyframes grooveAnim{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  20% {
    -moz-transform:  rotate(60deg) ;
  }
  40% {
    -moz-transform:  rotate(40deg) ;
  }
  60% {
    -moz-transform:  rotate(54deg) ;
  }
  80% {
    -moz-transform:  rotate(42deg) ;
  }
  100% {
    -moz-transform:  rotate(46deg) ;
  }
}

@-webkit-keyframes grooveAnim {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  rotate(60deg) ;
  }
  40% {
    -webkit-transform:  rotate(40deg) ;
  }
  60% {
    -webkit-transform:  rotate(54deg) ;
  }
  80% {
    -webkit-transform:  rotate(42deg) ;
  }
  100% {
    -webkit-transform:  rotate(46deg) ;
  }
}

@-o-keyframes grooveAnim {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  20% {
    -o-transform:  rotate(60deg) ;
  }
  40% {
    -o-transform:  rotate(40deg) ;
  }
  60% {
    -o-transform:  rotate(54deg) ;
  }
  80% {
    -o-transform:  rotate(42deg) ;
  }
  100% {
    -o-transform:  rotate(46deg) ;
  }
}

@-ms-keyframes grooveAnim {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  20% {
    -ms-transform:  rotate(60deg) ;
  }
  40% {
    -ms-transform:  rotate(40deg) ;
  }
  60% {
    -ms-transform:  rotate(54deg) ;
  }
  80% {
    -ms-transform:  rotate(42deg) ;
  }
  100% {
    -ms-transform:  rotate(46deg) ;
  }
}


code:
// Jump Animation -----------------------------------------
// --------------------------------------------------------

// Simple Jump

.jump {
  animation: jumpAnim linear 0.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: jumpAnim linear 0.4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: jumpAnim linear 0.4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: jumpAnim linear 0.4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: jumpAnim linear 0.4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes jumpAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  15% {
    transform:  translate(0px,-25px)  ;
  }
  30% {
    transform:  translate(0px,0px)  ;
  }
  45% {
    transform:  translate(0px,-15px)  ;
  }
  60% {
    transform:  translate(0px,0px)  ;
  }
  75% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes jumpAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  15% {
    -moz-transform:  translate(0px,-25px)  ;
  }
  30% {
    -moz-transform:  translate(0px,0px)  ;
  }
  45% {
    -moz-transform:  translate(0px,-15px)  ;
  }
  60% {
    -moz-transform:  translate(0px,0px)  ;
  }
  75% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes jumpAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  15% {
    -webkit-transform:  translate(0px,-25px)  ;
  }
  30% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  45% {
    -webkit-transform:  translate(0px,-15px)  ;
  }
  60% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes jumpAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  15% {
    -o-transform:  translate(0px,-25px)  ;
  }
  30% {
    -o-transform:  translate(0px,0px)  ;
  }
  45% {
    -o-transform:  translate(0px,-15px)  ;
  }
  60% {
    -o-transform:  translate(0px,0px)  ;
  }
  75% {
    -o-transform:  translate(0px,-5px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes jumpAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  15% {
    -ms-transform:  translate(0px,-25px)  ;
  }
  30% {
    -ms-transform:  translate(0px,0px)  ;
  }
  45% {
    -ms-transform:  translate(0px,-15px)  ;
  }
  60% {
    -ms-transform:  translate(0px,0px)  ;
  }
  75% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

// Jump Down
.jumpDown {
  animation: jumpDownAnim linear 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: jumpAnim linear 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: jumpAnim linear 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: jumpAnim linear 0.8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: jumpAnim linear 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes jumpDownAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  15% {
    transform:  translate(0px,25px)  ;
  }
  30% {
    transform:  translate(0px,0px)  ;
  }
  45% {
    transform:  translate(0px,15px)  ;
  }
  60% {
    transform:  translate(0px,0px)  ;
  }
  75% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes jumpDownAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  15% {
    -moz-transform:  translate(0px,25px)  ;
  }
  30% {
    -moz-transform:  translate(0px,0px)  ;
  }
  45% {
    -moz-transform:  translate(0px,-15px)  ;
  }
  60% {
    -moz-transform:  translate(0px,0px)  ;
  }
  75% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes jumpDownAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  15% {
    -webkit-transform:  translate(0px,25px)  ;
  }
  30% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  45% {
    -webkit-transform:  translate(0px,15px)  ;
  }
  60% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  75% {
    -webkit-transform:  translate(0px,5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes jumpDownAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  15% {
    -o-transform:  translate(0px,25px)  ;
  }
  30% {
    -o-transform:  translate(0px,0px)  ;
  }
  45% {
    -o-transform:  translate(0px,15px)  ;
  }
  60% {
    -o-transform:  translate(0px,0px)  ;
  }
  75% {
    -o-transform:  translate(0px,-5px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes jumpDownAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  15% {
    -ms-transform:  translate(0px,25px)  ;
  }
  30% {
    -ms-transform:  translate(0px,0px)  ;
  }
  45% {
    -ms-transform:  translate(0px,15px)  ;
  }
  60% {
    -ms-transform:  translate(0px,0px)  ;
  }
  75% {
    -ms-transform:  translate(0px,5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

// Jump To Left --------

.jumpLeft{
  animation: jumpLeftAnim linear 0.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: jumpLeftAnim linear 0.4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: jumpLeftAnim linear 0.4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: jumpLeftAnim linear 0.4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: jumpLeftAnim linear 0.4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes jumpLeftAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  20% {
    transform:  translate(-25px,0px)  ;
  }
  40% {
    transform:  translate(0px,0px)  ;
  }
  60% {
    transform:  translate(-15px,0px)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  100% {
    transform:  translate(-5px,0px)  ;
  }
  103% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes jumpLeftAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  20% {
    -moz-transform:  translate(-25px,0px)  ;
  }
  40% {
    -moz-transform:  translate(0px,0px)  ;
  }
  60% {
    -moz-transform:  translate(-15px,0px)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  100% {
    -moz-transform:  translate(-5px,0px)  ;
  }
  103% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes jumpLeftAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(-25px,0px)  ;
  }
  40% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  60% {
    -webkit-transform:  translate(-15px,0px)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(-5px,0px)  ;
  }
  103% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes jumpLeftAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  20% {
    -o-transform:  translate(-25px,0px)  ;
  }
  40% {
    -o-transform:  translate(0px,0px)  ;
  }
  60% {
    -o-transform:  translate(-15px,0px)  ;
  }
  80% {
    -o-transform:  translate(0px,0px)  ;
  }
  100% {
    -o-transform:  translate(-5px,0px)  ;
  }
  103% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes jumpLeftAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  20% {
    -ms-transform:  translate(-25px,0px)  ;
  }
  40% {
    -ms-transform:  translate(0px,0px)  ;
  }
  60% {
    -ms-transform:  translate(-15px,0px)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  100% {
    -ms-transform:  translate(-5px,0px)  ;
  }
  103% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

// Jump To Right --------

.jumpRight {
  animation: jumpRightAnim linear 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: jumpRightAnim linear 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: jumpRightAnim linear 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: jumpRightAnim linear 0.8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: jumpRightAnim linear 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes jumpRightAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  20% {
    transform:  translate(25px,0px)  ;
  }
  40% {
    transform:  translate(0px,0px)  ;
  }
  60% {
    transform:  translate(15px,0px)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  100% {
    transform:  translate(5px,0px)  ;
  }
  103% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes jumpRightAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  20% {
    -moz-transform:  translate(25px,0px)  ;
  }
  40% {
    -moz-transform:  translate(0px,0px)  ;
  }
  60% {
    -moz-transform:  translate(15px,0px)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  100% {
    -moz-transform:  translate(5px,0px)  ;
  }
  103% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes jumpRightAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(25px,0px)  ;
  }
  40% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  60% {
    -webkit-transform:  translate(15px,0px)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(5px,0px)  ;
  }
  103% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes jumpRightAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  20% {
    -o-transform:  translate(25px,0px)  ;
  }
  40% {
    -o-transform:  translate(0px,0px)  ;
  }
  60% {
    -o-transform:  translate(15px,0px)  ;
  }
  80% {
    -o-transform:  translate(0px,0px)  ;
  }
  100% {
    -o-transform:  translate(5px,0px)  ;
  }
  103% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes jumpRightAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  20% {
    -ms-transform:  translate(25px,0px)  ;
  }
  40% {
    -ms-transform:  translate(0px,0px)  ;
  }
  60% {
    -ms-transform:  translate(15px,0px)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  100% {
    -ms-transform:  translate(5px,0px)  ;
  }
  103% {
    -ms-transform:  translate(0px,0px)  ;
  }
}


code:
// Rotate Animation

// Rotate
.rotate{
  animation: rotateAnim linear 0.7s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: rotateAnim linear 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: rotateAnim linear 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotateAnim linear 0.7s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: rotateAnim linear 0.7s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes rotateAnim{
  0% {
    opacity:0;
    transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes rotateAnim{
  0% {
    opacity:0;
    -moz-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes rotateAnim {
  0% {
    opacity:0;
    -webkit-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) ;
  }
}

@-o-keyframes rotateAnim {
  0% {
    opacity:0;
    -o-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) ;
  }
}

@-ms-keyframes rotateAnim {
  0% {
    opacity:0;
    -ms-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) ;
  }
}

// Rotate Out
.rotateOut{
  animation: rotateOutAnim linear 0.7s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: rotateOutAnim linear 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: rotateOutAnim linear 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotateOutAnim linear 0.7s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: rotateOutAnim linear 0.7s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes rotateOutAnim{
  0% {
    opacity:1;
    transform:  rotate(0deg) ;
  }
  100% {
    opacity:0;
    transform:  rotate(200deg) ;
  }
}

@-moz-keyframes rotateOutAnim{
  0% {
    opacity:1;
    -moz-transform:  rotate(0deg) ;
  }
  100% {
    opacity:0;
    -moz-transform:  rotate(200deg) ;
  }
}

@-webkit-keyframes rotateOutAnim {
  0% {
    opacity:1;
    -webkit-transform:  rotate(0deg) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  rotate(200deg) ;
  }
}

@-o-keyframes rotateOutAnim {
  0% {
    opacity:1;
    -o-transform:  rotate(0deg) ;
  }
  100% {
    opacity:0;
    -o-transform:  rotate(200deg) ;
  }
}

@-ms-keyframes rotateOutAnim {
  0% {
    opacity:1;
    -ms-transform:  rotate(0deg) ;
  }
  100% {
    opacity:0;
    -ms-transform:  rotate(200deg) ;
  }
}

// Rotate Down
.rotateDown{
  animation: rotateDownAnim linear 0.7s;
  animation-iteration-count: 1;
  transform-origin: 0% 100%;
  -webkit-animation: rotateDownAnim linear 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 0% 100%;
  -moz-animation: rotateDownAnim linear 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 0% 100%;
  -o-animation: rotateDownAnim linear 0.7s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 0% 100%;
  -ms-animation: rotateDownAnim linear 0.7s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 0% 100%;
}

@keyframes rotateDownAnim{
  0% {
    opacity:0;
    transform:  rotate(-90deg) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes rotateDownAnim{
  0% {
    opacity:0;
    -moz-transform:  rotate(-90deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes rotateDownAnim {
  0% {
    opacity:0;
    -webkit-transform:  rotate(-90deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) ;
  }
}

@-o-keyframes rotateDownAnim {
  0% {
    opacity:0;
    -o-transform:  rotate(-90deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) ;
  }
}

@-ms-keyframes rotateDownAnim {
  0% {
    opacity:0;
    -ms-transform:  rotate(-90deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) ;
  }
}


code:
// Shake Animation

// shake simple
.shake{
  animation: shakeAnim linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: shakeAnim linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: shakeAnim linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: shakeAnim linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: shakeAnim linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes shakeAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  10% {
    transform:  translate(-10px,0px)  ;
  }
  20% {
    transform:  translate(10px,0px)  ;
  }
  30% {
    transform:  translate(-10px,0px)  ;
  }
  40% {
    transform:  translate(10px,0px)  ;
  }
  50% {
    transform:  translate(-10px,0px)  ;
  }
  60% {
    transform:  translate(10px,0px)  ;
  }
  70% {
    transform:  translate(-10px,0px)  ;
  }
  80% {
    transform:  translate(10px,0px)  ;
  }
  90% {
    transform:  translate(-10px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes shakeAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  10% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  20% {
    -moz-transform:  translate(10px,0px)  ;
  }
  30% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  40% {
    -moz-transform:  translate(10px,0px)  ;
  }
  50% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  60% {
    -moz-transform:  translate(10px,0px)  ;
  }
  70% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  80% {
    -moz-transform:  translate(10px,0px)  ;
  }
  90% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes shakeAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  10% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  30% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  40% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  60% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  70% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  80% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  90% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes shakeAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  10% {
    -o-transform:  translate(-10px,0px)  ;
  }
  20% {
    -o-transform:  translate(10px,0px)  ;
  }
  30% {
    -o-transform:  translate(-10px,0px)  ;
  }
  40% {
    -o-transform:  translate(10px,0px)  ;
  }
  50% {
    -o-transform:  translate(-10px,0px)  ;
  }
  60% {
    -o-transform:  translate(10px,0px)  ;
  }
  70% {
    -o-transform:  translate(-10px,0px)  ;
  }
  80% {
    -o-transform:  translate(10px,0px)  ;
  }
  90% {
    -o-transform:  translate(-10px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes shakeAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  10% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  20% {
    -ms-transform:  translate(10px,0px)  ;
  }
  30% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  40% {
    -ms-transform:  translate(10px,0px)  ;
  }
  50% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  60% {
    -ms-transform:  translate(10px,0px)  ;
  }
  70% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  80% {
    -ms-transform:  translate(10px,0px)  ;
  }
  90% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}


code:
// Shapes ----------------------------------------
// -----------------------------------------------

// Shapes Carré
.shapeCarre{
  animation: shapeCarreAnim ease 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: shapeCarreAnim ease 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: shapeCarreAnim ease 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: shapeCarreAnim ease 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: shapeCarreAnim ease 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes shapeCarreAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  20% {
    transform:  translate(90px,0px)  ;
  }
  40% {
    transform:  translate(90px,-90px)  ;
  }
  60% {
    transform:  translate(-90px,-90px)  ;
  }
  80% {
    transform:  translate(-90px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes shapeCarreAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  20% {
    -moz-transform:  translate(90px,0px)  ;
  }
  40% {
    -moz-transform:  translate(90px,-90px)  ;
  }
  60% {
    -moz-transform:  translate(-90px,-90px)  ;
  }
  80% {
    -moz-transform:  translate(-90px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes shapeCarreAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(90px,0px)  ;
  }
  40% {
    -webkit-transform:  translate(90px,-90px)  ;
  }
  60% {
    -webkit-transform:  translate(-90px,-90px)  ;
  }
  80% {
    -webkit-transform:  translate(-90px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes shapeCarreAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  20% {
    -o-transform:  translate(90px,0px)  ;
  }
  40% {
    -o-transform:  translate(90px,-90px)  ;
  }
  60% {
    -o-transform:  translate(-90px,-90px)  ;
  }
  80% {
    -o-transform:  translate(-90px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes shapeCarreAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  20% {
    -ms-transform:  translate(90px,0px)  ;
  }
  40% {
    -ms-transform:  translate(90px,-90px)  ;
  }
  60% {
    -ms-transform:  translate(-90px,-90px)  ;
  }
  80% {
    -ms-transform:  translate(-90px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

// Shapes Star
.shapeStar{
  animation: shapeStarAnim ease 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: shapeStarAnim ease 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: shapeStarAnim ease 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: shapeStarAnim ease 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: shapeStarAnim ease 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes shapeStarAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  20% {
    transform:  translate(0px,-90px)  ;
  }
  40% {
    transform:  translate(90px,90px)  ;
  }
  60% {
    transform:  translate(-45px,-45px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes shapeStarAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  20% {
    -moz-transform:  translate(0px,-90px)  ;
  }
  40% {
    -moz-transform:  translate(90px,90px)  ;
  }
  60% {
    -moz-transform:  translate(-45px,-45px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes shapeStarAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(0px,-90px)  ;
  }
  40% {
    -webkit-transform:  translate(90px,90px)  ;
  }
  60% {
    -webkit-transform:  translate(-45px,-45px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes shapeStarAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  20% {
    -o-transform:  translate(0px,-90px)  ;
  }
  40% {
    -o-transform:  translate(90px,90px)  ;
  }
  60% {
    -o-transform:  translate(-45px,-45px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes shapeStarAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  20% {
    -ms-transform:  translate(0px,-90px)  ;
  }
  40% {
    -ms-transform:  translate(90px,90px)  ;
  }
  60% {
    -ms-transform:  translate(-45px,-45px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}


code:
// Spins Animation

// Spin
.spin{
  animation: spinAnim linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 0%;
  -webkit-animation: spinAnim linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 0%;
  -moz-animation: spinAnim linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 0%;
  -o-animation: spinAnim linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 0%;
  -ms-animation: spinAnim linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 0%;
}

@keyframes spinAnim{
  0% {
    transform:  rotate(0deg) ;
  }
  20% {
    transform:  rotate(15deg) ;
  }
  40% {
    transform:  rotate(-10deg) ;
  }
  60% {
    transform:  rotate(5deg) ;
  }
  80% {
    transform:  rotate(-5deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes spinAnim{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  20% {
    -moz-transform:  rotate(15deg) ;
  }
  40% {
    -moz-transform:  rotate(-10deg) ;
  }
  60% {
    -moz-transform:  rotate(5deg) ;
  }
  80% {
    -moz-transform:  rotate(-5deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes spinAnim {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  rotate(15deg) ;
  }
  40% {
    -webkit-transform:  rotate(-10deg) ;
  }
  60% {
    -webkit-transform:  rotate(5deg) ;
  }
  80% {
    -webkit-transform:  rotate(-5deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}

@-o-keyframes spinAnim {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  20% {
    -o-transform:  rotate(15deg) ;
  }
  40% {
    -o-transform:  rotate(-10deg) ;
  }
  60% {
    -o-transform:  rotate(5deg) ;
  }
  80% {
    -o-transform:  rotate(-5deg) ;
  }
  100% {
    -o-transform:  rotate(0deg) ;
  }
}

@-ms-keyframes spinAnim {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  20% {
    -ms-transform:  rotate(15deg) ;
  }
  40% {
    -ms-transform:  rotate(-10deg) ;
  }
  60% {
    -ms-transform:  rotate(5deg) ;
  }
  80% {
    -ms-transform:  rotate(-5deg) ;
  }
  100% {
    -ms-transform:  rotate(0deg) ;
  }
}


code:
// Tada Animation

// Tada
.tada{
  animation: tadaAnim linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaAnim linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaAnim linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: tadaAnim linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: tadaAnim linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes tadaAnim{
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-moz-keyframes tadaAnim{
  0% {
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -moz-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-webkit-keyframes tadaAnim {
  0% {
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-o-keyframes tadaAnim {
  0% {
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -o-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -o-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -o-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -o-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -o-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -o-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -o-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}

@-ms-keyframes tadaAnim {
  0% {
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  20% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  30% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    -ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  60% {
    -ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  70% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  80% {
    -ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  90% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  100% {
    -ms-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;
  }
}


code:
// Flip Animation ---------------------------------

.turbine{
  animation: turbineAnim linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: turbineAnim linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: turbineAnim linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: turbineAnim linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: turbineAnim linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes turbineAnim{
  0% {
    transform:  rotate(360deg) ;
  }
  50% {
    transform:  rotate(3779deg) ;
  }
  100% {
    transform:  rotate(37799deg) ;
  }
}

@-moz-keyframes turbineAnim{
  0% {
    -moz-transform:  rotate(360deg) ;
  }
  50% {
    -moz-transform:  rotate(3779deg) ;
  }
  100% {
    -moz-transform:  rotate(37799deg) ;
  }
}

@-webkit-keyframes rotateAnim {
  0% {
    -webkit-transform:  rotate(360deg) ;
  }
  50% {
    -webkit-transform:  rotate(3779deg) ;
  }
  100% {
    -webkit-transform:  rotate(37799deg) ;
  }
}

@-o-keyframes turbineAnim {
  0% {
    -o-transform:  rotate(360deg) ;
  }
  50% {
    -o-transform:  rotate(3779deg) ;
  }
  100% {
    -o-transform:  rotate(37799deg) ;
  }
}

@-ms-keyframes turbineAnim {
  0% {
    -ms-transform:  rotate(360deg) ;
  }
  50% {
    -ms-transform:  rotate(3779deg) ;
  }
  100% {
    -ms-transform:  rotate(37799deg) ;
  }
}

// Turbine Trouble
.turbineTrouble{
  animation: turbineTroubleAnim ease 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: turbineTroubleAnim ease 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: turbineTroubleAnim ease 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: turbineTroubleAnim ease 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: turbineAnim ease 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes turbineTroubleAnim{
  0% {
    transform:  rotate(360deg) ;
  }
  50% {
    transform:  rotate(3779deg) ;
  }
  100% {
    transform:  rotate(37799deg) ;
  }
}

@-moz-keyframes turbineTroubleAnim{
  0% {
    -moz-transform:  rotate(360deg) ;
  }
  50% {
    -moz-transform:  rotate(3779deg) ;
  }
  100% {
    -moz-transform:  rotate(37799deg) ;
  }
}

@-webkit-keyframes turbineTroubleAnim {
  0% {
    -webkit-transform:  rotate(360deg) ;
  }
  50% {
    -webkit-transform:  rotate(3779deg) ;
  }
  100% {
    -webkit-transform:  rotate(37799deg) ;
  }
}

@-o-keyframes turbineTroubleAnim {
  0% {
    -o-transform:  rotate(360deg) ;
  }
  50% {
    -o-transform:  rotate(3779deg) ;
  }
  100% {
    -o-transform:  rotate(37799deg) ;
  }
}

@-ms-keyframes turbineTroubleAnim {
  0% {
    -ms-transform:  rotate(360deg) ;
  }
  50% {
    -ms-transform:  rotate(3779deg) ;
  }
  100% {
    -ms-transform:  rotate(37799deg) ;
  }
}

// Turbine Right
.turbineOutRight{
  animation: turbineOutRightAnim linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: turbineOutRightAnim linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: turbineOutRightAnim linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: turbineOutRightAnim linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: turbineOutRightAnim linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes turbineOutRightAnim{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    transform:  translate(24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    transform:  translate(48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    transform:  translate(72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-moz-keyframes turbineOutRightAnim{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -moz-transform:  translate(24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -moz-transform:  translate(48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -moz-transform:  translate(72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-webkit-keyframes turbineOutRightAnim {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -webkit-transform:  translate(24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -webkit-transform:  translate(48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -webkit-transform:  translate(72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-o-keyframes turbineOutRightAnim {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -o-transform:  translate(24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -o-transform:  translate(48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -o-transform:  translate(72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-ms-keyframes turbineOutRightAnim {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -ms-transform:  translate(24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -ms-transform:  translate(48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -ms-transform:  translate(72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

// Turbine Up
.turbineOutUp {
  animation: turbineOutUpAnim linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: turbineOutUpAnim linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: turbineOutUpAnim linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: turbineOutUpAnim linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: turbineOutUpAnim linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes turbineOutUpAnim{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

@-moz-keyframes turbineOutUpAnim{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -moz-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -moz-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -moz-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

@-webkit-keyframes turbineOutUpAnim {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -webkit-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -webkit-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -webkit-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

@-o-keyframes turbineOutUpAnim {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -o-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -o-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -o-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

@-ms-keyframes turbineOutUpAnim {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -ms-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -ms-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -ms-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

// Turbine Left
.turbineOutLeft {
  animation: turbineOutLeftAnim linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: turbineOutLeftAnim linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: turbineOutLeftAnim linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: turbineOutLeftAnim linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: turbineOutLeftAnim linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes turbineOutLeftAnim{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    transform:  translate(-24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    transform:  translate(-48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    transform:  translate(-72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    transform:  translate(-200px,0px)  rotate(180deg) ;
  }
}

@-moz-keyframes turbineOutLeftAnim{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -moz-transform:  translate(-24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -moz-transform:  translate(-48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -moz-transform:  translate(-72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(-200px,0px)  rotate(180deg) ;
  }
}

@-webkit-keyframes turbineOutLeftAnim {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -webkit-transform:  translate(-24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -webkit-transform:  translate(-48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -webkit-transform:  translate(-72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(-200px,0px)  rotate(180deg) ;
  }
}

@-o-keyframes turbineOutLeftAnim {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -o-transform:  translate(-24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -o-transform:  translate(-48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -o-transform:  translate(-72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(-200px,0px)  rotate(180deg) ;
  }
}

@-ms-keyframes turbineOutLeftAnim {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -ms-transform:  translate(-24px,0px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -ms-transform:  translate(-48px,0px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -ms-transform:  translate(-72px,0px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(-200px,0px)  rotate(180deg) ;
  }
}

.turbineOutDown {
  animation: turbineOutDownAnim linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: turbineOutDownAnim linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: turbineOutDownAnim linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: turbineOutDownAnim linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: turbineOutDownAnim linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes turbineOutDownAnim{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    transform:  translate(0px,24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    transform:  translate(0px,48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    transform:  translate(0px,72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    transform:  translate(0px,200px)  rotate(180deg) ;
  }
}

@-moz-keyframes turbineOutDownAnim{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -moz-transform:  translate(0px,24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -moz-transform:  translate(0px,48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -moz-transform:  translate(0px,72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -moz-transform:  translate(0px,200px)  rotate(180deg) ;
  }
}

@-webkit-keyframes turbineOutDownAnim {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -webkit-transform:  translate(0px,24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -webkit-transform:  translate(0px,48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -webkit-transform:  translate(0px,72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  translate(0px,200px)  rotate(180deg) ;
  }
}

@-o-keyframes turbineOutDownAnim {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -o-transform:  translate(0px,24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -o-transform:  translate(0px,48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -o-transform:  translate(0px,72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -o-transform:  translate(0px,200px)  rotate(180deg) ;
  }
}

@-ms-keyframes turbineOutDownAnim {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.8099985852029548;
    -ms-transform:  translate(0px,24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -ms-transform:  translate(0px,48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.43;
    -ms-transform:  translate(0px,72px)  rotate(35865deg) ;
  }
  100% {
    opacity:0;
    -ms-transform:  translate(0px,200px)  rotate(180deg) ;
  }
}

// Turbine In
// -----------------------------------------

// Turbine Up
.turbineUp {
  animation: turbineUpAnim linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: turbineUpAnim linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: turbineUpAnim linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: turbineUpAnim linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: turbineUpAnim linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes turbineUpAnim{
  0% {
    opacity:0;
    transform:  translate(0px,-200px)  rotate(0deg) ;
  }
  10% {
    opacity:0.43;
    transform:  translate(0px,-72px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.8099985852029548;
    transform:  translate(0px,-24px)  rotate(35865deg) ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  rotate(180deg) ;
  }
}

@-moz-keyframes turbineOutUpAnim{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.43;
    -moz-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -moz-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.8099985852029548;
    -moz-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

@-webkit-keyframes turbineOutUpAnim {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.43;
    -webkit-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -webkit-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.8099985852029548;
    -webkit-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

@-o-keyframes turbineOutUpAnim {
  0% {
    opacity:0;
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.43;
    -o-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -o-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.8099985852029548;
    -o-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}

@-ms-keyframes turbineOutUpAnim {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  10% {
    opacity:0.43;
    -ms-transform:  translate(0px,-24px)  rotate(413deg) ;
  }
  20% {
    opacity:0.620001414797045;
    -ms-transform:  translate(0px,-48px)  rotate(4092deg) ;
  }
  30% {
    opacity:0.8099985852029548;
    -ms-transform:  translate(0px,-72px)  rotate(35865deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,-200px)  rotate(180deg) ;
  }
}


code:
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org

root = true

[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
max_line_length = 80

[Makefile]
indent_style = tab


code:
[submodule "test/spec"]
	path = test/spec
	url = https://github.com/mustache/spec.git
[submodule "test/qunit-logging"]
	path = test/qunit-logging
	url = git://github.com/keithamus/qunit-logging.git
[submodule "test/qunit"]
	path = test/qunit
	url = git://github.com/jquery/qunit.git


code:
test
tools
web/1.0.0
web/images
web/stylesheets
web/favicon.ico
web/index.html.mustache
wrappers
Makefile


code:
language: node_js
node_js:
  - 0.6
before_script:
  - "git submodule update --init"
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"
  - "phantomjs test/phantom-js-loader.js"


code:
## Hogan.js - A mustache compiler. [![Build Status](https://secure.travis-ci.org/twitter/hogan.js.png)](http://travis-ci.org/twitter/hogan.js)

[Hogan.js](http://twitter.github.io/hogan.js/) is a compiler for the
[Mustache](http://mustache.github.io/) templating language. For information
on Mustache, see the [manpage](http://mustache.github.com/mustache.5.html) and
the [spec](https://github.com/mustache/spec).

## Basics

Hogan compiles templates to HoganTemplate objects, which have a render method.

```js
var data = {
  screenName: "dhg",
};

var template = Hogan.compile("Follow @{{screenName}}.");
var output = template.render(data);

// prints "Follow @dhg."
console.log(output);
```

## Features

Hogan is fast--try it on your workload.

Hogan has separate scanning, parsing and code generation phases. This way it's
possible to add new features without touching the scanner at all, and many
different code generation techniques can be tried without changing the parser.

Hogan exposes scan and parse methods. These can be useful for
pre-processing templates on the server.

```js
var text = "{{^check}}{{#i18n}}No{{/i18n}}{{/check}}";
text +=  "{{#check}}{{#i18n}}Yes{{/i18n}}{{/check}}";
var tree = Hogan.parse(Hogan.scan(text));

// outputs "# check"
console.log(tree[0].tag + " " + tree[0].name);

// outputs "Yes"
console.log(tree[1].nodes[0].nodes[0]);
```

It's also possible to use HoganTemplate objects without the Hogan compiler
present. That means you can pre-compile your templates on the server, and
avoid shipping the compiler. However, the optional lambda features from the
Mustache spec require the compiler and the original template source to be present.

Hogan also supports [template inheritance](https://github.com/mustache/spec/pull/75),
and maintains compatibility with other implementations like [mustache.java](https://github.com/spullara/mustache.java),
[mustache.php](https://github.com/bobthecow/mustache.php), and [GRMustache](https://github.com/groue/GRMustache)

## Why Hogan.js?

Why another templating library?

Hogan.js was written to meet three templating library requirements: good
performance, standalone template objects, and a parser API.

## Install

# Node.js

```
npm install hogan.js
```

# component

```
component install twitter/hogan.js
```

## Compilation options

The second argument to Hogan.compile is an options hash.

```js
var text = "my <%example%> template."
Hogan.compile(text, {delimiters: '<% %>'});
```

There are currently four valid options.

asString: return the compiled template as a string. This feature is used
by hulk to produce strings containing pre-compiled templates.

sectionTags: allow custom tags that require opening and closing tags, and
treat them as though they were section tags.

```js
var text = "my {{_foo}}example{{/foo}} template."
Hogan.compile(text, { sectionTags: [{o: '_foo', c: 'foo'}]});
```

The value is an array of object with o and c fields that indicate names
for custom section tags. The example above allows parsing of {{_foo}}{{/foo}}.

delimiters: A string that overrides the default delimiters. Example: "<% %>".

disableLambda: disables the higher-order sections / lambda-replace features of Mustache.

## Issues

Have a bug? Please create an issue here on GitHub!

https://github.com/twitter/hogan.js/issues

## Versioning

For transparency and insight into our release cycle, releases will be numbered with the follow format:

`<major>.<minor>.<patch>`

And constructed with the following guidelines:

* Breaking backwards compatibility bumps the major
* New additions without breaking backwards compatibility bumps the minor
* Bug fixes and misc changes bump the patch

For more information on semantic versioning, please visit http://semver.org/.

## Testing

To run the tests you first need to update all git submodules.

    $ git submodule init
    $ git submodule update

Unit tests are written using [QUnit](http://qunitjs.com/). To run them, open `test/index.html`
in a browser.

Use [node](http://nodejs.org/) to run all tests from the
[mustache spec](https://github.com/mustache/spec).

    $ node test/spec.js

## Authors

**Robert Sayre**

+ http://github.com/sayrer

**Jacob Thornton**

+ http://github.com/fat

## License

Copyright 2011 Twitter, Inc.

Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0


code:
#!/usr/bin/env node

/*
 *  Copyright 2011 Twitter, Inc.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

// dependencies
var hogan  = require('../lib/hogan.js')
  , path   = require('path')
  , nopt   = require('nopt')
  , mkderp = require('mkdirp')
  , fs     = require('fs');

// locals
var specials       = ['/', '.', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\']
  , specialsRegExp = new RegExp('(\\' + specials.join('|\\') + ')', 'g')
  , options        = {
    'namespace': String,
    'outputdir': path,
    'variable': String,
    'wrapper': String,
    'version': true,
    'help': true
    }
  , shortHand      = {
    'n': ['--namespace'],
    'o': ['--outputdir'],
    'v': ['--variable'],
    'w': ['--wrapper'],
    'h': ['--help'],
    'v': ['--version']
    }
  , templates;

// options
options = nopt(options, shortHand);

// escape special regexp characters
function esc(text) {
  return text.replace(specialsRegExp, '\\$1');
}

// cyan function for rob
function cyan(text) {
  return '\033[36m' + text + '\033[39m';
}

// check for dirs and correct ext (<3 for windows)
function extractFiles(args) {
  var usage = '\n' +
              cyan('USAGE:') + '   hulk [--wrapper wrapper] [--outputdir outputdir] [--namespace namespace] [--variable variable] FILES\n\n' +
              cyan('OPTIONS:') + ' [-w, --wrapper]   :: wraps the template (i.e. amd)\n' +
              '         [-o, --outputdir] :: outputs the templates as individual files to a directory\n\n' +
              '         [-n, --namespace] :: prepend string to template names\n\n' +
              '         [-v, --variable]  :: variable name for non-amd wrapper\n\n' +
              cyan('EXAMPLE:') + ' hulk --wrapper amd ./templates/*.mustache\n\n' +
              cyan('NOTE:') + '    hulk supports the "*" wildcard and allows you to target specific extensions too\n',
      files = [];

  if (options.version) {
    console.log(require('../package.json').version);
    process.exit(0);
  }

  if (!args.length || options.help) {
    console.log(usage);
    process.exit(0);
  }

  args.forEach(function (arg) {

    if (/\*/.test(arg)) {
      arg = arg.split('*');
      return files = files.concat(
        fs.readdirSync(arg[0] || '.')
          .map(function (f) {
            var file = path.join(arg[0], f);
            return new RegExp(esc(arg[1]) + '$').test(f) && fs.statSync(file).isFile() && file;
          })
          .filter(function (f) {
            return f;
          })
      );
    }

    if (fs.statSync(arg).isFile()) files.push(arg);

  })

  return files;
}

// remove utf-8 byte order mark, http://en.wikipedia.org/wiki/Byte_order_mark
function removeByteOrderMark(text) {
  if (text.charCodeAt(0) === 0xfeff) {
    return text.substring(1);
  }
  return text;
}

// wrap templates
function wrap(file, name, openedFile) {
  switch(options.wrapper) {
    case "amd":
      return 'define('+ (!options.outputdir ? '"' + path.join(path.dirname(file), name) + '", ' : '') + '[ "hogan.js" ], function(Hogan){ return new Hogan.Template(' + hogan.compile(openedFile, { asString: 1 }) + ');});';
    default:
      return (options.variable || 'templates')
        + '["' + name + '"] = new Hogan.Template('
        + hogan.compile(openedFile, { asString: 1 })
        + ');';
  }
}

// write the directory
if (options.outputdir) {
  mkderp.sync(options.outputdir);
}

// Prepend namespace to template name
function namespace(name) {
    return (options.namespace || '') + name;
}

// write a template foreach file that matches template extension
templates = extractFiles(options.argv.remain)
  .map(function (file) {
    var openedFile = fs.readFileSync(file, 'utf-8'), name;
    if (!openedFile) return;
    name = namespace(path.basename(file).replace(/\..*$/, ''));
    openedFile = removeByteOrderMark(openedFile.trim());
    openedFile = wrap(file, name, openedFile);
    if (!options.outputdir) return openedFile;
    var vn = options.variable || 'templates';
    fs.writeFileSync(path.join(options.outputdir, name + '.js')
      , 'if (!!!' + vn + ') var ' + vn + ' = {};\n' + openedFile);
  })
  .filter(function (t) {
    return t;
  });

// output templates
if (!templates.length || options.outputdir) process.exit(0);
if (!options.wrapper) {
  var vn = options.variable || 'templates';
  console.log('if (!!!' + vn + ') var ' + vn + ' = {};');
}
console.log(templates.join('\n'));


code:
{
  "name": "hogan.js"
  , "description": "A mustache compiler."
  , "version": "3.0.2"
  , "keywords": ["mustache", "template"]
  , "main": "lib/hogan.js"
  , "scripts": [
    "lib/compiler.js",
    "lib/hogan.js",
    "lib/template.js"
  ]
  , "homepage": "http://twitter.github.com/hogan.js/"
  , "author": "Twitter Inc."
  , "repository": {
    "type": "git"
    , "url": "https://github.com/twitter/hogan.js.git"
  }
  , "licenses": [
    { "type": "Apache-2.0"
      , "url": "http://www.apache.org/licenses/LICENSE-2.0"
    }
  ]
  , "ignore" : [
    ,"tools"
    ,"wrappers"
    ,".*"
  ]
}


code:
<html>

<head>
  <title>inheritance test</title>
</head>
<script>var Hogan = {};</script>
<script src="./lib/template.js"></script>
<script src="./lib/compiler.js"></script>
<script src="inheritance.js"></script>
<body>

hmm

</body>
</html>


code:
var Hogan = Hogan || require('./lib/hogan');

function doIt() {

    var child        = Hogan.compile('{{< intermediate }} {{$childcontent}} child content {{/childcontent}} {{/intermediate}}');

    var intermediate = Hogan.compile('{{< parent}} {{$content}} intermediate content {{$childcontent}} ERROR {{/childcontent}} {{/content}} {{/parent}}');

    var parent       = Hogan.compile('Content:{{$content}} parent content{{/content}}');

    var result       = child.render({}, {intermediate: intermediate, parent: parent});

    console.log("got:     ", result);
    console.log("expected:", "Content: intermediate content child content")
}

function doIt2() {

    var child        = Hogan.compile('{{< intermediate }}{{$childcontent}}child content{{/childcontent}}{{/intermediate}}');

    var intermediate = Hogan.compile('{{< parent}} {{$content}} intermediate content {{/content}}{{$childcontent}} ERROR2 {{/childcontent}}  {{/parent}}');

    var parent       = Hogan.compile('Content:{{$content}} parent content {{/content}}{{$childcontent}} ERROR1 {{/childcontent}}');

    var result       = child.render({}, {intermediate: intermediate, parent: parent});

    console.log("got:     ", result);
    console.log("expected:", "Content: intermediate content child content")
}

function doIt3() {
  Hogan.cache = {};
  var child1 = Hogan.compile("{{<intermediate}}{{$content}}CHILD1{{/content}}{{/intermediate}}");
  var child2 = Hogan.compile("{{<intermediate}}{{$content}}CHILD2{{/content}}{{/intermediate}}");
  var intermediate = Hogan.compile("{{<parent}}{{$content}}INTERMEDIATE{{/content}}{{/parent}}");
  var parent = Hogan.compile("Content: {{$content}}PARENT{{/content}}");
  var s;

  s = parent.render({}, {});

  s = intermediate.render({}, {parent: parent});

  s = child1.render({}, {intermediate: intermediate, parent: parent});

  s = child2.render({}, {intermediate: intermediate, parent: parent});
  console.log("got:         ", s);
  console.log("expected:    ", "Content: CHILD2");
}

doIt3();


hogan.js

description: A mustache compiler.

keywords: mustache template

author: Twitter Inc.

type: git


code:
<script src="http://twitter.github.com/hogan.js/builds/2.0.0/template-2.0.0.js">
<script>
if (!!!templates) var templates = {};
templates["TM.test"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div>");t.b(t.v(t.f("foo",c,p,0)));t.b("</div>");return t.fl(); },partials: {}, subs: {  }});

alert(templates.test.render({'foo': 'bar'}));
</script>


code:
var template = require('./lib/hogan.js').compile('{{a}}');
console.log(template.render({a:'C:\\werwr\\werwer'}))

    var x = require('./lib/hogan.js').compile('{{a}}').render({a:'C:\\werwr\\werwer'});

console.log(x)


code:
/*
 *  Copyright 2011 Twitter, Inc.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

var HoganTemplate = (function () {

  function constructor(text) {
    this.text = text;
  };

  constructor.prototype = {
    // render: replaced by generated code.
    r: function (context, partials) { return ''; },

    // variable escaping
    v: hoganEscape,

    render: function render(context, partials) {
      return this.r(context, partials);
    },

    // tries to find a partial in the curent scope and render it
    rp: function(name, context, partials, indent) {
      var partial = partials[name];

      if (!partial) {
        return '';
      }

      return partial.render(context, partials);
    },

    // render a section
    rs: function(context, partials, section) {
      var buf = '';
      var tail = context[context.length - 1];
      if (!isArray(tail)) {
        buf = section(context, partials);
        return buf;
      }

      for (var i = 0; i < tail.length; i++) {
        context.push(tail[i]);
        buf += section(context, partials);
        context.pop();
      }
      return buf;
    },

    // maybe start a section
    s: function(val, ctx, partials, inverted, start, end) {
      if (isArray(val) && val.length === 0) {
        return false;
      }

      if (!inverted && typeof val == 'function') {
        val = this.ls(val, ctx, partials, start, end);
      }

      var pass = (val === '') || !!val;

      if (!inverted && pass && ctx) {
        ctx.push((typeof val == 'object') ? val : ctx[ctx.length - 1]);
      }

      return pass;
    },

    // find values with dotted names
    d: function(key, ctx, partials, returnFound) {
      if (key === '.' && isArray(ctx[ctx.length - 2])) {
        return ctx[ctx.length - 1];
      }

      var names = key.split('.');
      var val = this.f(names[0], ctx, partials, returnFound);
      var cx = null;
      for (var i = 1; i < names.length; i++) {
        if (val && typeof val == 'object' && names[i] in val) {
          cx = val;
          val = val[names[i]];
        } else {
          val = '';
        }
      }

      if (returnFound && !val) {
        return false;
      }

      if (!returnFound && typeof val == 'function') {
        ctx.push(cx);
        val = this.lv(val, ctx, partials);
        ctx.pop();
      }

      return val;
    },

    // find values with normal names
    f: function(key, ctx, partials, returnFound) {
      var val = false;
      var v = null;
      var found = false;

      for (var i = ctx.length - 1; i >= 0; i--) {
        v = ctx[i];
        if (v && typeof v == 'object' && key in v) {
          val = v[key];
          found = true;
          break;
        }
      }

      if (!found) {
        return (returnFound) ? false : "";
      }

      if (!returnFound && typeof val == 'function') {
        val = this.lv(val, ctx, partials);
      }

      return val;
    },

    // higher order templates
    ho: function(val, cx, partials, text) {
      var t = val.call(cx, text, function(t) {
        return Hogan.compile(t).render(cx);
      });
      var s = Hogan.compile(t.toString()).render(cx, partials);
      this.b = s;
      return false;
    },

    // higher order template result buffer
    b: '',

    // lambda replace section
    ls: function(val, ctx, partials, start, end) {
      var cx = ctx[ctx.length - 1];
      if (val.length > 0) {
        return this.ho(val, cx, partials, this.text.substring(start, end));
      }
      var t = val.call(cx);
      if (typeof t == 'function') {
        return this.ho(t, cx, partials, this.text.substring(start, end));
      }
      return t;
    },

    // lambda replace variable
    lv: function(val, ctx, partials) {
      var cx = ctx[ctx.length - 1];
      return Hogan.compile(val.call(cx).toString()).render(cx, partials);
    }
  };

  var rAmp = /&/g, rLt = /</g, rGt = />/g, rApos =/\'/g,
      rQuot = /\"/g, hChars =/[&<>\"\']/;
  function hoganEscape(str) {
    var s = String(str === null ? '' : str);
      return hChars.test(s) ? s.replace(rAmp,'&')
                   .replace(rLt,'<').replace(rGt,'>')
                   .replace(rApos,''').replace(rQuot, '"') : s;
  }

  var isArray = Array.isArray || function(a) {
    return Object.prototype.toString.call(a) === '[object Array]';
  }

  return constructor;
})();

var Hogan = (function () {

  function scan(text) {
    var len = text.length,
        IN_TEXT = 0,
        IN_TAG_TYPE = 1,
        IN_TAG = 2,
        state = IN_TEXT,
        tagType = null,
        buf = '',
        tokens = [],
        seenTag = false,
        i = 0,
        lineStart = 0,
        otag = '{{',
        ctag = '}}';

    function addBuf() {
      if (buf.length > 0) {
        tokens.push(new String(buf));
        buf = '';
      }
    }

    function lineIsWhitespace() {
      var isAllWhitespace = true;
      for (var j = lineStart; j < tokens.length; j++) {
        isAllWhitespace =
          (tokens[j].tag && tagTypes[tokens[j].tag] < tagTypes['_v']) ||
           (!tokens[j].tag && tokens[j].match(rIsWhitespace) == null);
        if (!isAllWhitespace) {
          return false;
        }
      }

      return isAllWhitespace;
    }

    function filterLine(haveSeenTag, noNewLine) {
      addBuf();
      if (haveSeenTag && lineIsWhitespace()) {
        for (var j = lineStart; j < tokens.length; j++) {
          if (!tokens[j].tag) {
            tokens.splice(j, 1);
          }
        }
      } else if (!noNewLine) {
        tokens.push({tag:'\n'})
      }

      seenTag = false;
      lineStart = tokens.length;
    }

    function changeDelimiters(text, index) {
      var close = '=' + ctag;
      var closeIndex = text.indexOf(close, index);
      var delimiters = trim(text.substring(text.indexOf('=', index) + 1,
                                           closeIndex)).split(' ');
      otag = delimiters[0];
      ctag = delimiters[1];
      return closeIndex + close.length - 1;
    }

    for (i = 0; i < len; i++) {
      if (state == IN_TEXT) {
        if (tagChange(otag, text, i)) {
          --i;
          addBuf();
          state = IN_TAG_TYPE;
        } else {
          if (text[i] == '\n') {
            filterLine(seenTag);
          } else {
            buf += text[i];
          }
        }
      } else if (state == IN_TAG_TYPE) {
        i += otag.length - 1;
        var tag = tagTypes[text[i + 1]];
        tagType = tag ? text[i + 1] : '_v';
        seenTag = i;
        if (tagType == '=') {
          i = changeDelimiters(text, i);
          state = IN_TEXT;
        } else {
          if (tag) {
            i++;
          }
          state = IN_TAG;
        }
      } else {
        if (tagChange(ctag, text, i)) {
          i += ctag.length - 1;
          tokens.push({tag: tagType, n: trim(buf),
                       i: (tagType == '/') ? seenTag - 1 : i + 1});
          buf = '';
          state = IN_TEXT;
          if (tagType == '{') {
            i++;
          }
        } else {
          buf += text[i];
        }
      }
    }

    filterLine(seenTag, true);

    return tokens;
  }

  function trim(s) {
    if (s.trim) {
      return s.trim();
    }

    return s.replace(/^\s*|\s*$/g, '');
  }

  // remove whitespace according to Mustache spec
  var rIsWhitespace = /\S/;

  var tagTypes = {
    '#': 1, '^': 2, '/': 3,  '!': 4, '>': 5,
    '<': 6, '=': 7, '_v': 8, '{': 9, '&': 10
  };

  function tagChange(tag, text, index) {
    if (text[index] != tag[0]) {
      return false;
    }

    for (var i = 1, l = tag.length; i < l; i++) {
      if (text[index + i] != tag[i]) {
        return false;
      }
    }

    return true;
  }

  function buildTree(tokens, kind, stack, customTags) {
    var instructions = [],
        opener = null,
        token = null;

    while (tokens.length > 0) {
      token = tokens.shift();
      if (token.tag == '#' || token.tag == '^' ||
          isOpener(token, customTags)) {
        stack.push(token);
        token.nodes = buildTree(tokens, token.tag, stack, customTags);
        instructions.push(token);
      } else if (token.tag == '/') {
        if (stack.length == 0) {
          throw new Error('Closing tag without opener: /' + token.n);
        }
        opener = stack.pop();
        if (token.n != opener.n && !isCloser(token.n, opener.n, customTags)) {
          throw new Error('Nesting error: ' + opener.n + ' vs. ' + token.n);
        }
        opener.end = token.i;
        return instructions;
      } else {
        instructions.push(token);
      }
    }

    if (stack.length > 0) {
      throw new Error('missing closing tag: ' + stack.pop().n);
    }

    return instructions;
  }

  function isOpener(token, tags) {
    for (var i = 0, l = tags.length; i < l; i++) {
      if (tags[i].o == token.n) {
        token.tag = '#';
        return true;
      }
    }
  }

  function isCloser(close, open, tags) {
    for (var i = 0, l = tags.length; i < l; i++) {
      if (tags[i].c == close && tags[i].o == open) {
        return true;
      }
    }
  }

  function generate(tree, text, options) {
    var code = 'var c = [cx];var b = "";var _ = this;' +
               walk(tree) + 'return b;';
    if (options.asString) {
      return 'function(cx,p){' + code + ';};';
    }

    var template = new HoganTemplate(text);
    template.r = new Function('cx', 'p', code);
    return template;
  }

  var rQuot = /\"/g, rNewline =  /\n/g, rCr = /\r/g, rSlash = /\\/g;
  function esc(s) {
    return s.replace(rSlash, '\\\\')
            .replace(rQuot, '\\\"')
            .replace(rNewline, '\\n')
            .replace(rCr, '\\r')
  };

  function chooseMethod(s) {
    return (~s.indexOf('.')) ? 'd' : 'f';
  }

  function walk(tree) {
    var code = '';
    for (var i = 0, l = tree.length; i < l; i++) {
      var tag = tree[i].tag;
      if (tag == '#') {
        code += section(tree[i].nodes, tree[i].n, chooseMethod(tree[i].n),
                        tree[i].i, tree[i].end);
      } else if (tag == '^') {
        code += invertedSection(tree[i].nodes, tree[i].n,
                                chooseMethod(tree[i].n));
      } else if (tag == '<' || tag == '>') {
        code += partial(tree[i].n);
      } else if (tag == '{' || tag == '&') {
        code += tripleStache(tree[i].n, chooseMethod(tree[i].n));
      } else if (tag == '\n') {
        code += text('\n');
      } else if (tag == '_v') {
        code += variable(tree[i].n, chooseMethod(tree[i].n));
      } else if (tag === undefined) {
        code += text(tree[i]);
      }
    }
    return code;
  }

  function section(nodes, id, method, start, end) {
    var code = 'if(_.s(_.' + method + '("' + esc(id) + '",c,p,1),';
    code += 'c,p,0,' + start + ',' + end + ')){';
    code += 'b += _.rs(c,p,';
    code += 'function(c,p){ var b = "";';
    code += walk(nodes);
    code += 'return b;});c.pop();}';
    code += 'else{b += _.b; _.b = ""};';
    return code;
  }

  function invertedSection(nodes, id, method) {
    var code = 'if (!_.s(_.' + method + '("' + esc(id) + '",c,p,1),c,p,1,0,0)){';
    code += walk(nodes);
    code += '};';
    return code;
  }

  function partial(id) {
    return 'b += _.rp("' +  esc(id) + '",c[c.length - 1],p);';
  }

  function tripleStache(id, method) {
    return 'b += (_.' + method + '("' + esc(id) + '",c,p,0));';
  }

  function variable(id, method) {
    return 'b += (_.v(_.' + method + '("' + esc(id) + '",c,p,0)));';
  }

  function text(id) {
    return 'b += "' + esc(id) + '";';
  }

  return ({
    scan: scan,

    parse: function(tokens, options) {
      options = options || {};
      return buildTree(tokens, '', [], options.sectionTags || []);
    },

    cache: {},

    compile: function(text, options) {
      // options
      //
      // asString: false (default)
      //
      // sectionTags: [{o: '_foo', c: 'foo'}]
      // An array of object with o and c fields that indicate names for custom
      // section tags. The example above allows parsing of {{_foo}}{{/foo}}.
      //
      options = options || {};

      var t = this.cache[text];
      if (t) {
        return t;
      }
      t = generate(this.parse(scan(text), options), text, options);
      return this.cache[text] = t;
    }
  });
})();

// Export the hogan constructor for Node.js and CommonJS.
if (typeof module !== 'undefined' && module.exports) {
  module.exports = Hogan;
  module.exports.Template = HoganTemplate;
} else if (typeof exports !== 'undefined') {
  exports.Hogan = Hogan;
  exports.HoganTemplate = HoganTemplate;
}