@charset "utf-8";
/* CSS Document */
/* 
Define this in your CSS 
Animation-Title = Replace it by the name you want to give your animation
*/

/* Chrome, Safari */
@-webkit-keyframes Animation-Title {
	0% {
		/* Add some property like - color: #1abc9c;*/
	}
	50% {
		/* Add some property like - color: #16F1C6;*/
	}
	100% {
		/* Add some property like - color: #06F9C9;*/
	}
}

/* Firefox */
@-moz-keyframes Animation-Title {
	0% {
		/* Add some property like - color: #1abc9c;*/
	}
	50% {
		/* Add some property like - color: #1abc9c;*/
	}
	100% {
		/* Add some property like - color: #1abc9c;*/
	}
}

/* Standard Syntax */
@keyframes Animation-Title {
	0% {
		/* Add some property like - color: #1abc9c;*/
	}
	50% {
		/* Add some property like - color: #16F1C6;*/
	}
	100% {
		/* Add some property like - color: #06F9C9;*/
	}
}

/*
div {
  animation: bounceIn 2s;
}

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];
*/

/*
@keyframes bounceIn2 {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

div {
  animation-duration: 1s;
  animation-name: bounceIn2;
}
*/


/*
@keyframes bounceIn2 {
	animation: bounceIn2 2s;
}

@-webkit-keyframes bounceIn2 {
	animation: bounceIn2 2s;
}

@-moz-keyframes bounceIn2 {
	animation: bounceIn2 2s;
}
*/

@keyframes bounceIn {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  
  100% {
    transform: scale(1);
	  opacity: 1;
  }
}


.bounceIn {
  animation-duration: 5s;
  animation-name: bounceIn;
}

.animation {
	-webkit-animation: Animation-Title 3s infinite;
	-moz-animation: Animation-Title 3s infinite;	
	animation: Animation-Title 3s infinite;
}

.slideleft {
  animation-duration: 3s;
  animation-name: slideleft;
}

@keyframes slideleft {
  from {
    margin-left: 100%;
    width: 150%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.slideright {
  animation-duration: 3s;
  animation-name: slideright;
}

@keyframes slideright {
  from {
    margin-left: -100%;
    width: 150%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}