2012-01-30 8 views
23

저는 오늘 CSS9 애니메이션을 몇 시간 동안 IE9에서 작동 시키려고 노력해 왔습니다.IE9에서 CSS3 애니메이션 사용하기

몇 가지 JavaScript 대체 기능을 구현했지만 지식이 부족하여 실패했습니다. 사용자 오류 또는 코드 오류로 인해 오류가 발생했는지 확신 할 수 없습니다.

여기 내 코드의 jsFiddle이 있는데, 배경 이미지를 색으로 바꿨습니다. 기본적으로 녹색과 검은 색 사각형은 Firefox와 Webkit 브라우저에서 회전합니다.

http://jsfiddle.net/fJxsV/

나는 그것은 또한 IE9에서 실행 갖고 싶어.

내가 도와 주시면 감사하겠습니다.

+10

CSS3 전환 및 애니메이션 IE9에서 작동하지 않습니다 : 내가 사용하는 것이 jQuery를 함께 회전으로

if(!Modernizr.cssanimations) { //jQuery fallback } 

: 모더 나이저, 그것은만큼 간단합니다. * * IE10에서 작동해야합니다. –

+0

jQuery 라이브러리를 사용하여 IE9에서 작동합니다. 나는 이것을 구현하는 방법을 모른다. http://addyosmani.com/blog/css3transitions-jquery/ –

+0

아니 아주 :). 해당 플러그인은 전환 지원을 테스트하고 지원이 감지되면 순수 CSS 전환을 사용합니다. 그렇지 않으면 jQuery의 내부 애니메이션 함수를 사용하여 애니메이션을 수행합니다. 이 플러그인은 IE9에서 CSS3 전환을 활성화하지 않으며 jQuery는 회전 애니메이션을 기본적으로 지원하지 않습니다. 다음과 같은 플러그인을 사용해야합니다 : http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html,하지만 이것은 대체 유형 작업을 수행하지 않습니다. 귀하의 링크 당. 그래서 * IE9에서 작동해야한다면, 네이티브 CSS3에 대해 걱정할 필요가 없습니다.이 플러그인을 사용하여 JS의 모든 애니메이션을 수행하십시오. –

답변

24

CSS 애니메이션이 지원되지 않는 경우를 감지하기 위해 Modernizr을 사용합니다. http://jqueryrotate.com/

+2

대답이 아닙니다. 문제는 어떻게! –

+2

질문은 위의 주석에서 이미 답변되었습니다 (CSS3 전환 및 애니메이션은 IE9에서 작동하지 않습니다). 내 대답은 IE9에서 CSS3 애니메이션을 사용할 수 없다는 사실에 대한 해결책입니다. – eivers88

+0

jQuery를 언급 해 주셔서 대단히 감사합니다. – LINQ