@charset "utf-8";

/* その場で */
.fadeIn {
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fade_animation {
	animation-name: fade_animation;
	animation-duration: 1s;
	animation-fill-mode: both;
}

@keyframes fade_animation {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
		transform: translate(0);
	}
}

.fadeUp {
	transform: translateY(50px);
}

.fadeDown {
	transform: translateY(-50px);
}

.fadeRight {
	transform: translateX(50px);
}

.fadeLeft {
	transform: translateX(-50px);
}