css animation 지원하지 않는 브라우저에서 보이게 하기

css animation은 익스플로러 10부터 적용된다.

애니메이션을 짰는데 opacity: 0으로 시작하는 경우 지원하지 않는 브라우저에서는 요소가 보이지 않게 된다.

미지원 브라우저에서 보이도록 하기 위해 요소에 opacity: 1 을 주고 키프레임 시작점에서 opacity: 0 을 준다.

키프레임이 먹히지 않더라도 요소가 보여진다.

 

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

 

 

hyeonseok.com/blog/809

IE9에서 animation 지원 안되어서 보이지 않는 콘텐츠 보이게 하기 - 신현석(Hyeonseok Shin)