@charset 'UTF-8';

/*  basic  */
*.animation {
	opacity: 0;
}
*.animation.start {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
}

/*  fadein  */
*.animation.fadein.start { animation-name: fadein;}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*  up  */
*.animation.up.start { animation-name: up;}
@keyframes up {
	0% {
		transform: translateY(10%);
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*  popup  */
*.animation.popup.start { animation-name: popup;}
@keyframes popup {
	0% {
		transform: translateY(80px) scale(0.8);
		opacity: 0;
	}
	70% {
		transform: translateY(0) scale(1.0);
	}
	85% {
		transform: translateY(10px) scale(0.95);
	}
	100% {
		transform: scale(1.0);
	}
	80%, 100% {
		opacity: 1;
	}
}

/*  lefttoright  */
*.animation.lefttoright.start { animation-name: lefttoright;}
@keyframes lefttoright {
	0% {
		transform: translateX(-100%);
		opacity: 1;
	}
	70% {
		transform: translateX(0);
	}
	85% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/*  righttoleft  */
*.animation.righttoleft.start { animation-name: righttoleft;}
@keyframes righttoleft {
	0% {
		transform: translateX(100%);
		opacity: 1;
	}
	70% {
		transform: translateX(0);
	}
	85% {
		transform: translateX(5%);
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}