CSS 페이드인

위에서 아래로

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
}

animation: fadeInDown 0.3s;

왼쪽에서 오른쪽으로

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
}

animation: fadeInLeft 0.3s;

오른쪽에서 왼쪽으로

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
}

animation: fadeInRight 0.3s;

출처

• (즐거웅코드) CSS 위에서 아래로 내려오며 페이드인(fade in) 되는 애니메이션