CSS 애니메이션이 전체 CPU를 소비하지 않는 방법은 무엇입니까?

저는 CSS 애니메이션과 변환을 사용하여 로더 gif를 만들려고합니다. 불행하게도 다음 코드는 Mac OSX에서 Firefox의 (때때로 Chrome, Safari의) CPU 사용량을 <에서 10 % 이상으로 90 % 이상으로 변환합니다. infinite linear 회전이나 행동 -like -moz- 공급 업체 접두사는 "로더 GIF"없이 손실됩니다CSS 애니메이션이 전체 CPU를 소비하지 않는 방법은 무엇입니까?

i.icon-repeat { 
    display:none; 
    -webkit-animation: Rotate 1s infinite linear; 
    -moz-animation: Rotate 1s infinite linear; //**this is the offending line** 
    animation: Rotate 1s infinite linear; 
} 
@-webkit-keyframes Rotate { 
    from {-webkit-transform:rotate(0deg);} 
    to {-webkit-transform:rotate(360deg);} 
} 
@-keyframes Rotate { 
    from {transform:rotate(0deg);} 
    to {transform:rotate(360deg);} 
} 
@-moz-keyframes Rotate { 
    from {-moz-transform:rotate(0deg);} 
    to {-moz-transform:rotate(360deg);} 
}

참고. 즉 아이콘이 계속 회전하지 않습니다.

아마 이것은 단지 버그일까요, 아니면 내가 뭔가 잘못하고있는 걸까요?

출처

2012-08-02 tim peterson

(!) 참고 : :이 매우 일반적입니다 알지만, 아이콘 정말 위해'i'를 사용하여 (AB)

은 그래서 그 대신 그, 이렇게 (위 내 질문에 CSS와 결합) 나쁜 습관과 그렇게해서는 안됩니다. 게다가 코드가 정확하고 다른 방법으로는 볼 수 없기 때문에 당신이 그것을 도울 수 없다고 생각합니다. – Christoph

호기심 때문에 왜 각 @keyframes에서 오페라 픽스가 수정 되었습니까? (나는 그들과 함께 경험이 없다, 그게 필요합니까?) – Andy

왜 (회전) 휠을 문자 그대로 재발 명하는 대신에 spin.js를 사용하지 않는 것이 좋습니까? – Cyrille

내 문제가 수정되었습니다. 아이콘의 가시성을 토글하는 대신 단순히 DOM을 추가했다. CSS 애니메이션 사용에 대해 잘 모르는 핵심은 display:none 대 display:inline은 CPU를 어느 쪽이든 소비한다는 것입니다.

var icon = document.createElement("i"); //create the icon 
icon.className = "icon-repeat"; 

document.body.appendChild(icon); //icon append to the DOM 

function removeElement(el) { // generic function to remove element could be used elsewhere besides this example 
    el.parentNode.removeChild(el); 
} 

removeElement(icon); //triggers the icon's removal from the DOM

출처

2012-09-30 20:10:07

버그 일 수 있습니다. 그러나 이러한 공급 업체가 접두어로 사용하는 많은 제품과 마찬가지로 여전히 진행중인 작업입니다. 전반적으로 더 신뢰할 수있는 결과를 얻으려면 JavaScript (아마도 jQuery)를 사용하는 것이 좋습니다.

출처

2012-08-02 11:42:39

. 답안에 포함 시키거나 연결할 수있는 요소의 시계 방향 회전을 염두에 두는 스크립트가 있습니까? –

먼저 어떤 Firefox 버전을 사용하고 있습니까? 버그일지도 모르지만 CSS3 애니메이션은 많은 CPU를 사용하는 것으로 알려져 있습니다. 그러나 jQuery에 비해 훨씬 빠릅니다.

@ 키 프레임이 아닙니다. @keyframes입니다.

회전 이미지보다 새로운 것을 사용하는 것이 좋습니다.

출처

2012-08-02 12:03:16 williamtell

Firefox 14.0.1을 사용하고 있습니다. 마지막 코멘트를 분명히 할 수 있습니까 ("사용하는 것이 낫습니다 ..")? 나는 네가 의미하는 바를 잘 모르겠다. –

정말로 늦게 늦어 져서 죄송합니다. 다르게 말하면, 무언가를 보여주기 위해 다른 접근 방식을 사용하지 않는 것이 좋습니다. 로드 중 ... Windows 8에서 사용되는 방법과 비슷합니다. 아이디어를 얻으시겠습니까? – williamtell

windows8 스크린 샷 또는 비디오 링크를 포함 할 수 있습니까? 무슨 뜻인지 모르겠다. –

CSS 애니메이션이 전체 CPU를 소비하지 않는 방법은 무엇입니까?

답변

관련 문제