/*************************** FADINGS  ***************************/


[data-animate|=fade-start] {
  opacity: 0;
}
[data-animate|=fade-end] {
  opacity: 1;
}



[data-animate|=pushLeft-start] {
  opacity: 0;
  padding-left: 200px;
}
[data-animate|=pushLeft-end] {
  opacity: 1;
  padding-left: 0px;
}



[data-animate|=push-start] {
  opacity: 0;
  padding-top: 200px;
}
[data-animate|=push-end] {
  opacity: 1;
  padding-top: 0px;
}


[data-animate|=slideLeft-start] {
  opacity: 0;
  transform:translate(-200px,0px)
}
[data-animate|=slideLeft-end] {
  opacity: 1;
  transform:translate(0px,0px)
}

[data-animate|=slideRight-start] {
  opacity: 0;
  transform:translate(200px,0px)
}
[data-animate|=slideRight-end] {
  opacity: 1;
  transform:translate(0px,0px)
}


[data-animate|=slideUp-start] {
  opacity: 0;
  transform-origin: top left;
  transform:translate(0px,100px)
}
[data-animate|=slideUp-end] {
  opacity: 1;
  transform-origin: top left;
  transform:translate(0px,0px)
}

[data-animate|=slideDown-start] {
  opacity: 0;
  transform-origin: top left;
  transform:translate(0px,-100px)
}
[data-animate|=slideDown-end] {
  opacity: 1;
  transform-origin: top left;
  transform:translate(0px,0px)
}


[data-animate|=rotateLeft-start] {
  opacity: 0;
  transform-origin: top left;
  transform: rotate(45deg);
}
[data-animate|=rotateLeft-end] {
  opacity: 1;
  transform-origin: top left;
  transform: rotate(0deg);
}

[data-animate|=rotateRight-start] {
  opacity: 0;
  transform-origin: top right;
  transform: rotate(-45deg);
}
[data-animate|=rotateRight-end] {
  opacity: 1;
  transform-origin: top right;
  transform: rotate(0deg);
}



[data-animate|=scale-start] {
  opacity: 0;
  transform: scale(.3);
}
[data-animate|=scale-end] {
  opacity: 1;
  transform: scale(1);
}



[data-animate|=skew-start] {
  opacity: 0;
  transform:skew(-45deg,0deg)
}
[data-animate|=skew-end] {
  opacity: 1;
  transform:skew(0deg,0deg)
}

[data-animate|=prespective-start] {
  opacity: 0;
  transform-origin: top left;
  transform: perspective(200px) rotateY(50deg);
}
[data-animate|=prespective-end] {
  opacity: 1;
  transform-origin: top left;
  transform: perspective(0px) rotateY(0deg);
}




[data-animate|=scaleX-start] {
  opacity: 0;
  transform: scaleX(0);
}
[data-animate|=scaleX-end] {
  opacity: 1;
  transform: scaleX(1);
}


[data-animate|=growLeft-start] {
  opacity: 0;
  width: 0%;
}
[data-animate|=growLeft-end] {
  opacity: 1;
  width: 100%;
}




/*************************** EASINGS SPEED ***************************/

[easing=spd_1] {
    -webkit-transition:  .1s ease;
    -moz-transition:  .1s ease;
    -o-transition:  .1s ease;
    transition:  .1s ease;
}
[easing=spd_2] {
    -webkit-transition:  .2s ease;
    -moz-transition:  .2s ease;
    -o-transition:  .2s ease;
    transition:  .2s ease;
}
[easing=spd_3] {
    -webkit-transition:  .3s ease;
    -moz-transition:  .3s ease;
    -o-transition:  .3s ease;
    transition:  .3s ease;
}
[easing=spd_4] {
    -webkit-transition:  .4s ease;
    -moz-transition:  .4s ease;
    -o-transition:  .4s ease;
    transition:  .4s ease;
}
[easing=spd_5] {
    -webkit-transition:  .5s ease;
    -moz-transition:  .5s ease;
    -o-transition:  .5s ease;
    transition:  .5s ease;
}
[easing=spd_6] {
    -webkit-transition:  .6s ease;
    -moz-transition:  .6s ease;
    -o-transition:  .6s ease;
    transition:  .6s ease;
}
[easing=spd_7] {
    -webkit-transition:  .7s ease;
    -moz-transition:  .7s ease;
    -o-transition:  .7s ease;
    transition:  .7s ease;
}
[easing=spd_8] {
    -webkit-transition:  .8s ease;
    -moz-transition:  .8s ease;
    -o-transition:  .8s ease;
    transition:  .8s ease;
}
[easing=spd_9] {
    -webkit-transition:  .9s ease;
    -moz-transition:  .9s ease;
    -o-transition:  .9s ease;
    transition:  .9s ease;
}
[easing=spd_10] {
    -webkit-transition:  1s ease;
    -moz-transition:  1s ease;
    -o-transition:  1s ease;
    transition:  1s ease;
}
[easing=spd_12] {
    -webkit-transition:  1.2s ease;
    -moz-transition:  1.2s ease;
    -o-transition:  1.2s ease;
    transition:  1.2s ease;
}
[easing=spd_14] {
    -webkit-transition:  1.4s ease;
    -moz-transition:  1.4s ease;
    -o-transition:  1.4s ease;
    transition:  1.4s ease;
}
[easing=spd_16] {
    -webkit-transition:  1.6s ease;
    -moz-transition:  1.6s ease;
    -o-transition:  1.6s ease;
    transition:  1.6s ease;
}
[easing=spd_20] {
    -webkit-transition:  2s ease;
    -moz-transition:  2s ease;
    -o-transition:  2s ease;
    transition:  2s ease;
}