/*--------------------------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);}
}
/* Chrome, Safari, Opera */
@-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);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionRotate3 {
  0% { transform: rotate(0);} 
  25% { transform: rotate(-10deg)}
  75% { transform: rotate(10deg);}
  100% { transform: rotate(0);}
}
/* Standard syntax */
@keyframes MotionRotate3 {
  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);}
}
/* Chrome, Safari, Opera */
@-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);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionX4 {
    0%   {transform: translateX(100px);}
    100%  {transform: translateX(0);}
}
/* Standard syntax */
@keyframes MotionX4 {
	0%   {transform: translateX(100px);}
	100%  {transform: translateX(0);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionX5 {
    0%   {transform: translateX(0);}
    25%   {transform: translateX(-50px);}
    75%   {transform: translateX(50px);}
    100%  {transform: translateX(0);}
}
/* Standard syntax */
@keyframes MotionX5 {
  0%   {transform: translateX(0);}
  25%   {transform: translateX(-50px);}
  75%   {transform: translateX(50px);}
  100%  {transform: translateX(0);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionX6 {
  0%   {transform: translateX(-500px); opacity: 0;}
  80%  {transform: translateX(100px); opacity: 1;}
  100%  {transform: translateX(300px); opacity: 0;}
}
/* Standard syntax */
@keyframes MotionX6 {
  0%   {transform: translateX(-500px); opacity: 0;}
  80%  {transform: translateX(100px); opacity: 1;}
  100%  {transform: translateX(300px); opacity: 0;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionX7 {
  0%   {transform: translateX(-600px); opacity: 0;}
  80%  {transform: translateX(0); opacity: 1;}
  100%  {transform: translateX(100px); opacity: 0;}
}
/* Standard syntax */
@keyframes MotionX7 {
  0%   {transform: translateX(-600px); opacity: 0;}
  80%  {transform: translateX(0); opacity: 1;}
  100%  {transform: translateX(100px); opacity: 0;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionX8 {
  0%   {transform: translateX(-600px); opacity: 0;}
  70%  {transform: translateX(-150px); opacity: 1;}
  100%  {transform: translateX(50px); opacity: 0;}
}
/* Standard syntax */
@keyframes MotionX8 {
  0%   {transform: translateX(-600px); opacity: 0;}
  70%  {transform: translateX(-150px); opacity: 1;}
  100%  {transform: translateX(50px); opacity: 0;}
}
/*--------------------------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);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionY2 {
    0%   {transform: translateY(50px);}
    100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY2 {
	0%   {transform: translateY(50px);}
	100%  {transform: translateY(0);}
}
/* Chrome, Safari, Opera */
@-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);}
}
/* Chrome, Safari, Opera */
@-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);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionY5 {
    0%   {transform: translateY(0);}
	50%	  {transform: translateY(-10px);}
    100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY5 {
	0%   {transform: translateY(0);}
	50%	  {transform: translateY(-10px);}
	100%  {transform: translateY(0);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionY6 {
  0%   {transform: translateY(-100px);}
  30%   {transform: translateY(20px);}
  100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY6 {
  0%   {transform: translateY(-100px);}
  30%   {transform: translateY(20px);}
  100%  {transform: translateY(0);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionY7 {
  0%   {transform: translateY(100px);}
  30%   {transform: translateY(-20px);}
  100%  {transform: translateY(0);}
}
/* Standard syntax */
@keyframes MotionY7 {
  0%   {transform: translateY(100px);}
  30%   {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);}
}
/* Chrome, Safari, Opera */
@-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);}
}
/* Chrome, Safari, Opera */
@-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);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes MotionScale4 {
	0%   {transform: scale(2); opacity: 0;}
	35%   {transform: scale(0.75); opacity: 1;}
	80%   {transform: scale(1.2);}
	100%   {transform: scale(1);}
}
/* Standard syntax */
@keyframes MotionScale4 {
	0%   {transform: scale(2); opacity: 0;}
	35%   {transform: scale(0.75); opacity: 1;}
	80%   {transform: scale(1.2);}
	100%   {transform: scale(1);}
}
