/**
 * Animations
 */

article ul, article li { animation-duration: 1s; animation-fill-mode: both }

.shake { animation-name: shake }
@keyframes shake {
	0%, 100% { transform: translateX(0) }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) }
	20%, 40%, 60%, 80% { transform: translateX(5px) }
}

.fadeIn { animation-name: fadeIn }
@keyframes fadeIn {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

.fadeInLeft { animation-name: fadeInLeft }
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeOutRight { animation-name: fadeOutRight }
@keyframes fadeOutRight {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(20px);
	}
}