@charset 'UTF-8';

/*  basic  */
*.animation {
	opacity: 0;
}
*.animation.start {
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
	animation-delay: 0.1s;
	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;
	}
}

/*  float  */
*.animation.floating {
	animation-name: floating;
	opacity: 1;
	animation-duration: 12s;
	animation-iteration-count: infinite;
}
*.animation.floating.delay-1 { animation-delay: 2s;}
*.animation.floating.delay-2 { animation-delay: 4s;}
*.animation.floating.delay-3 { animation-delay: 6s;}
*.animation.floating.delay-4 { animation-delay: 8s;}
*.animation.floating.delay-5 { animation-delay: 10s;}
@keyframes floating {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(15px);
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}