/*--------------------------Rotate--------------------------*/
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionRotate1 {
  0% { transform: rotate(0);} 
  30% { transform: rotate(5deg);}
  70% { transform: rotate(-5deg);}
  100% { transform: rotate(0);}
}
/* Standard syntax */
@keyframes MotionRotate1 {
  0% { transform: rotate(0);} 
  30% { transform: rotate(5deg);}
  70% { transform: rotate(-5deg);}
  100% { transform: rotate(0);}
}
@-webkit-keyframes MotionRotate2 {
  0% { transform: rotate(0);} 
  25% { transform: rotate(-3deg);}
  50% { transform: rotate(0);}
  75% { transform: rotate(3deg);}
  100% { transform: rotate(0);}
}
/* Standard syntax */
@keyframes MotionRotate2 {
  0% { transform: rotate(0);} 
  25% { transform: rotate(-3deg);}
  50% { transform: rotate(0);}
  75% { transform: rotate(3deg);}
  100% { transform: rotate(0);}
}
@-webkit-keyframes MotionRotate4 {
  0% { transform: rotate(0);} 
  25% { transform: rotate(-10deg)}
  75% { transform: rotate(10deg);}
  100% { transform: rotate(0);}
}
/* Standard syntax */
@keyframes MotionRotate4 {
  0% { transform: rotate(0);} 
  25% { transform: rotate(-10deg)}
  75% { transform: rotate(10deg);}
  100% { transform: rotate(0);}
}
/*--------------------------translateX--------------------------*/
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionX1 {
    0%   {transform: translateX(-50px);}
    100%  {transform: translateX(0);}
}
/* Standard syntax */
@keyframes MotionX1 {
	0%   {transform: translateX(-50px);}
	100%  {transform: translateX(0);}
}
@-webkit-keyframes MotionX2 {
    0%   {transform: translateX(50px);}
    100%  {transform: translateX(0);}
}
/* Standard syntax */
@keyframes MotionX2 {
	0%   {transform: translateX(50px);}
	100%  {transform: translateX(0);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionX3 {
    0%   {transform: translateX(-100px);}
    100%  {transform: translateX(0);}
}
/* Standard syntax */
@keyframes MotionX3 {
	0%   {transform: translateX(-100px);}
	100%  {transform: translateX(0);}
}
@-webkit-keyframes MotionX4 {
    0%   {transform: translateX(100px);}
    100%  {transform: translateX(0);}
}
/* Standard syntax */
@keyframes MotionX4 {
	0%   {transform: translateX(100px);}
	100%  {transform: translateX(0);}
}
@-webkit-keyframes MotionX5 {
    0%   {transform: translateX(5px);}
    50%   {transform: translateX(-5px);}
    100%  {transform: translateX(5px);}
}
/* Standard syntax */
@keyframes MotionX5 {
  0%   {transform: translateX(5px);}
  50%   {transform: translateX(-5px);}
  100%  {transform: translateX(5px);}
}
/*--------------------------translateY--------------------------*/
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionY1 {
  0%   {transform: translateY(-50px);}
  100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY1 {
	0%   {transform: translateY(-50px);}
	100%  {transform: translateY(0);}
}
@-webkit-keyframes MotionY2 {
  0%   {transform: translateY(50px);}
  100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY2 {
	0%   {transform: translateY(50px);}
	100%  {transform: translateY(0);}
}
@-webkit-keyframes MotionY3 {
  0%   {transform: translateY(0);}
  50%	  {transform: translateY(20px);}
  100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY3 {
	0%   {transform: translateY(0);}
	50%	  {transform: translateY(20px);}
	100%  {transform: translateY(0);}
}
@-webkit-keyframes MotionY4 {
  0%   {transform: translateY(0);}
  50%	  {transform: translateY(-20px);}
  100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY4 {
	0%   {transform: translateY(0);}
	50%	  {transform: translateY(-20px);}
	100%  {transform: translateY(0);}
}
/*--------------------------Scale--------------------------*/
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionScale1 {
	0%   {transform: scale(1);}
	10%   {transform: scale(1.2);}
	50%   {transform: scale(.6);}
	100%   {transform: scale(1);}
}
/* Standard syntax */
@keyframes MotionScale1 {
	0%   {transform: scale(1);}
	10%   {transform: scale(1.2);}
	50%   {transform: scale(.6);}
	100%   {transform: scale(1);}
}

@-webkit-keyframes MotionScale2 {
	0%   {transform: scale(.5);}
	50%   {transform: scale(.9);}
	80%   {transform: scale(1.1);}
	100%   {transform: scale(1);}
}
/* Standard syntax */
@keyframes MotionScale2 {
	0%   {transform: scale(.5);}
	50%   {transform: scale(.9);}
	80%   {transform: scale(1.1);}
	100%   {transform: scale(1);}
}

@-webkit-keyframes MotionScale3 {
	0%   {transform: scale(1);}
	35%   {transform: scale(0.95);}
	80%   {transform: scale(1.02);}
	100%   {transform: scale(1);}
}
/* Standard syntax */
@keyframes MotionScale3 {
	0%   {transform: scale(1);}
	35%   {transform: scale(0.95);}
	80%   {transform: scale(1.02);}
	100%   {transform: scale(1);}
}
/*--------------------------Custom--------------------------*/
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionC1 {
  0%   {transform: translateX(-200px);}
  30%   {transform: translateX(-50px) translateY(-150px);}
  70%   {transform: translateX(0) translateY(-50px);}
  100%  {transform: translateX(-100px);}
  }
/* Standard syntax */
@keyframes MotionC1 {
0%   {transform: translateX(-200px);}
30%   {transform: translateX(-50px) translateY(-150px);}
70%   {transform: translateX(0) translateY(-50px);}
100%  {transform: translateX(-100px);}
}
