IE9에서 animation 지원 안되어서 보이지 않는 콘텐츠 보이게 하기

p {
	opacity: 0;
	animation-name: reveal;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
	animation-duration: 0.5s;
}
@keyframes reveal {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
p {
	opacity: 1;
	animation-name: reveal;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-duration: 1s;
}
@keyframes reveal {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

위의 코드에서 변경한 opacity 초기값이 1이지만 animation에서 바로 0으로 설정하기 때문에 화면에 0.5초간 보이지 않다가 나타나게 된다. 앞에 있는 코드와 동일한 효과지만 더 견고하게 작동하게 된다. 


https://hyeonseok.com/soojung/css/2017/02/12/809.html