마우스 오버를 했을 때 정지된 아이콘에 애니메이션 효과를 구현하기 위해서 마우스 오버를 하면 GIF이미지를 배경이미지로 사용하도록 만들었다. 다른 브라우저에서는 다 잘 작동하는데 유독 웹킷계열의 브라우저에서만 두번째 마우스를 올렸을 때에는 애니메이션이 나오지 않고 GIF 이미지의 마지막 프레임만 보였다. GIF 이미지를 한번만 재생이 되도록 만들었기 때문이기도 했지만 다른 브라우저는 마우스 오버를 하면 GIF를 처음부터 재생해 줬지만 웹킷계열의 브라우저는 다시 재생해 주지 않았다.

검색을 좀 해보니 이미지를 새로 불러오지 않는 한 웹킷에서 애니메이션을 계속 발생시키기 힘들다는 내용을 찾을 수 있었고 구현 방식을 변경하기로 하였다. 가장 먼저 떠오른 생각은 background-position을 자바스크립트로 변경하면서 애니메이션을 구현하는 방식이었는데 이를 자바스크립트를 사용하지 않고 CSS3 키프레임 애니메이션을 사용해보기로 했다.

CSS3 애니메이션을 사용할 때 가장 골치아픈 부분은 바로 제조사 접두사의 처리이다. 똑같은 구문을 -webkit-, -moz-, -ms-, -o- 만 앞에 붙여서 새로 추가를 해줘야 하기 때문에 5개의 중복된 코드가 나타난다. 특히 @keyframes 룰도 5번이나 써줘야해서 코드의 가독성이나 유지보수성이 아주 떨어진다. 일단은 급한대로 PHP를 써서 CSS 코드를 생성하는 방법을 사용했다. 키프레임 선언은 아래와 같다.

@keyframes mogocen {
	0% {
		background-position: 0 0
	}
	10% {
		background-position: 0 -62px;
	}
	20% {
		background-position: 0 -124px;
	}
	25% {
		background-position: 0 -186px;
	}
	30% {
		background-position: 0 -248px;
	}
	40% {
		background-position: 0 -310px;
	}
	50% {
		background-position: 0 -372px;
	}
	60% {
		background-position: 0 -434px;
	}
	70% {
		background-position: 0 -372px;
	}
	80% {
		background-position: 0 -434px;
	}
	90% {
		background-position: 0 -372px;
	}
	100% {
		background-position: 0 -372px;
	}
}

이렇게만 하고 애니메이션을 구동해보면 스프라이트된 이미지가 위아래로 마구 움직이는 웃지못할 결과가 나타난다. 바로 background-position이 변경될 때 중간 단계를 브라우저가 자동으로 그려주기 때문인데 원하는 결과를 나타내기 위해서 중간 단계를 없애줄 필요가 있다. 이는 animation-timing-function 속성을 사용해서 제어할 수 있다. 보통은 여기에 이징 함수를 사용하게 되는데 steps(1)과 같이 중간 과정을 1단계로 표시하도록 설정하면 중간 단계를 채워넣지 않게 된다.

마지막으로 애니메이션이 완료된 상황에서 100%의 프레임에 애니메이션이 정지된 상태로 멈춰있게 해야 한다. 이는 animation-fill-mode에 forwards 값을 지정하면 된다.

완성된 애니메이션 코드는 아래와 같다.

.mogocen a:hover {
	background-image: url(mogocen.png);
	background-position: 0 0;
	animation: mogocen 1s steps(1) 4 forwards;
}

실제로 작동하는 코드는 CSS로 구현한 GIF 애니메이션 효과 예제에서 확인할 수 있다. 실제 코드는 제조사 접두사를 사용했기 때문에 훨씬 길어졌다. 웹킷에서도 잘 작동한다. CSS3 애니메이션에 대한 자세한 내용은 dev.opera의 Making a move with CSS3 animations에 아주 잘 나와있다.