CSS fadein fadeout

Animation 속성을 이용하여, 사라지는 효과를 가지고자 한다.

 

FadeIn: 서서히 생기는 효과

.box {
/* animation : 효과(@keyframes 이름) 동작시간 */
	animation: fadein 3s;
}

@keyframes fadein {
/* 효과를 동작시간 동안 0 ~ 1까지 */
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

 

@keyframes를 이용하여 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정

from을 시작으로 to로 변화하는 과정을 만들 수 있다.

 

FadeOut: 서서히 사라지는 효과

.box {
/* animation : 효과(@keyframes 이름) 동작시간 */
	animation: fadein 3s;
}

@keyframes fadeout {
/* 효과를 동작시간 동안 0 ~ 1까지 */
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

fadeIn과는 반대로 효과를 주면 사라지는 효과를 줄 수가 있다.