/* * * * * * * * * * * * * * * * * * * * *\  
  Repaintless
  Boost Your CSS Animation Performance
  Anna Migas
  http://szynszyliszys.github.io/repaintless/
\* * * * * * * * * * * * * * * * * * * * */
.element-animated { animation-duration: 1s; }
.element-animated.short { animation-duration: .5s; }
.element-animated.long { animation-duration: 2s; }
.element-animated.infinite { animation-iteration-count: infinite; }
.slide-from-right { animation-name: slide-from-right; }
@keyframes slide-from-right {
 	0% { transform: translateX(200px); }
	100% { transform: none; }
}
.slide-from-left { animation-name: slide-from-left; }
@keyframes slide-from-left {
 	0% { transform: translateX(-200px); }
	100% { transform: none; }
}
.slide-from-top { animation-name: slide-from-top; }
@keyframes slide-from-top {
 	0% { transform: translateY(-200px); }
	100% { transform: none; }
}
.slide-from-bottom { animation-name: slide-from-bottom; }
@keyframes slide-from-bottom {
 	0% { transform: translateY(200px); }
	100% { transform: none; }
}
.slide-from-right-bottom { animation-name: slide-from-right-bottom; }
@keyframes slide-from-right-bottom {
	0% { transform: translate(100px, 100px); }
	100% { transform: none; }
}
.slide-from-left-bottom { animation-name: slide-from-left-bottom; }
@keyframes slide-from-left-bottom {
	0% { transform: translate(-100px, 100px); }
	100% { transform: none; }
}
.slide-from-right-top { animation-name: slide-from-right-top; }
@keyframes slide-from-right-top {
	0% { transform: translate(100px, -100px); }
	100% { transform: none; }
}
.slide-from-left-top { animation-name: slide-from-left-top; }
@keyframes slide-from-left-top {
	0% { transform: translate(-100px, -100px); }
	100% { transform: none; }
}
.slide-left-right {
	animation-name: slide-left-right;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
@keyframes slide-left-right {
	0% { transform: translateX(-100px); }
	50% { transform: none; }
	100% { transform: translateX(100px); }
}
.slide-top-bottom {
	animation-name: slide-top-bottom;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
@keyframes slide-top-bottom {
	0% { transform: translateY(-100px); }
	50% { transform: none; }
	100% { transform: translateY(100px); }
}
.tremble {
	animation-name: tremble;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes tremble {
	0%, 20%, 40%, 60%, 80%, 100% { transform: translateX(5px); }
	10%, 30%, 50%, 70%, 90% { transform: none; }
}
.fade-out { animation-name: fade-out; }
@keyframes fade-out {
	0% { opacity: 0.8; }
	100% { opacity: 0; }
}
.fade-in {
	animation-name: fade-in;
	animation-timing-function: ease-in;
}
@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 0.8; }
}
.pulsate {
	animation-name: pulsate;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
@keyframes pulsate {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 0.6; }
}
.rotate {
	animation-name: rotate;
	animation-timing-function: ease-in-out;
}
@keyframes rotate {
	0% { transform: rotate(-1turn); }
	100% { transform: none; }
}
.rotate-slide-from-right {
	animation-name: rotate-slide-from-right;
	animation-timing-function: ease-in-out;
}
@keyframes rotate-slide-from-right {
	0% {
		transform: translateX(200px) rotate(1turn);
		transform-origin: center;
	}
	100% { transform: none; }
}
.rotate-slide-from-left {
	animation-name: rotate-slide-from-left;
	animation-timing-function: ease-in-out;
}
@keyframes rotate-slide-from-left {
	0% {
		transform: translateX(-200px) rotate(-1turn);
		transform-origin: center;
	}
	100% { transform: none; }
}
.rotate-slide-from-top {
	animation-name: rotate-slide-from-top;
	animation-timing-function: ease-in-out;
}
@keyframes rotate-slide-from-top {
	0% {
		transform: translateY(-200px) rotate(-1turn);
		transform-origin: center;
	}
	100% { transform: none; }
}
.rotate-slide-from-bottom {
	animation-name: rotate-slide-from-bottom;
	animation-timing-function: ease-in-out;
}
@keyframes rotate-slide-from-bottom {
	0% {
		transform: translateY(200px) rotate(-1turn);
		transform-origin: center;
	}
	100% { transform: none; }
}