animation은 IE10부터 지원한다. 만약 화면에 없었던 콘텐츠가 나오는 효과에 animation을 사용하면 IE9에서는 콘텐츠가 안보이는 상태로 계속 있어서 아무것도 보이지 않게 된다. 특히 animation-delay를 적용할 경우 초기값이 화면에 나오지 않는 상태여야 하기 때문에 대안을 제시할 수가 없다.

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;
	}
}

이렇게 할 경우 animation이 지원되지 않는 환경에서는 opacity가 0인 상태로 계속 있기 때문에 화면에 나타나지 않게 된다.

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초간 보이지 않다가 나타나게 된다. 앞에 있는 코드와 동일한 효과지만 더 견고하게 작동하게 된다. 전체코드는 실제 작동하는 예제를 참고하면 된다.