CSS 속성 애니메이션

개요

jQuery 를 사용하면 애니메이션을 편리하게 이용할 수가 있지만, jQuery 버전마다 지원하는 CSS 속성이 다르고, 브라우저 버전마다도 또 다르다.

대표적인 경우로 backgroundSize 와 backgroundPosition 이 있다.

특히 backgroundSize 의 경우에는 jquery 1.9.x + 최신 구글 크롬에서도 애니메이션이 제대로 동작하지 않는다. 이 경우 이걸 제대로 지원해주는 브라우저는 메이저에는 없다고 봐도 된다.

IE 8 이하 버전은 아예 이 CSS 속성 자체를 지원하질 않는다.

삽질

처음에는 jquery 에서 css 프로퍼티를 인식하게 해보려고 했다. csshook 같은 녀석들을 사용해보려고 했지만, 무슨 짓거리를 해도 브라우저는 나를 비웃듯이 뻣뻣하게 정지된 배경을 보여주곤 했다.

해결책

CSS 속성에 대해서는 지원하지 않는 것에 대한 애니메이션이 힘들다. 이건 DOM 을 직접 조작해야 하는 특성 탓이다. 따라서 그냥 평범한 객체에 대해서는 어떤 속성이건 애니메이션을 지원한다.

var obj = {x:0, y:0};
$(obj).animate({ x: 100, y: 100}, {duration:200});

이라고 하면 0.2초동안 x 와 y 속성이 애니메이션된다.

그리고 jquery 의 animate 메소드가 제공하는 옵션중에는 step(number) 과 progress(promise, number, obj) 가 있다. 간단하게 step 을 사용하면 된다.

위 방식을 사용해서 배경 이미지 사이즈를 가로 0, 세로 0에서 가로 100, 세로 100 픽셀로 애니메이션하는 예제는 아래와 같다.

var obj = {x:0, y:0};
var target = $("#target");
$(obj).animate({ x: 100, y: 100}, { 
      duration:200,
      step:function(){
           target.css("backgroundSize", this.x + "px " + this.y + "px);
       }
});

데모

http://web.lazygyu.net/demos/ui/test.html

관련 링크