CSS에서 박스 섀도우 애니메이션을 가속화하는 방법은 무엇입니까?

Question

CSS로 상자 그림자에 애니메이션을 적용하고 있습니다. Instruments 프로그램을 사용하여이 애니메이션은 iOS Safari에서의 CPU의 35 % 인 을 차지하고 있음을 발견했습니다! 페이지를 계속 실행하면 iPhone이 더 뜨거워지고 뜨거워집니다. 애니메이션을 주석 처리하면 CPU 사용량이 정상으로 돌아옵니다. 하드웨어가이 애니메이션을 가속화하여 CPU에 부담을주지 않도록하려면 어떻게해야합니까?

jsFiddle : http://jsfiddle.net/tokyotech/TutLh/

@-webkit-keyframes pulseGlow { 
    0% { 
     box-shadow: none; 
    } 
    10% { 
     box-shadow: 0 0 1.4em rgba(255,0,0,1), 
      0 0 1em rgba(255,0,0,1) inset; 
     border-color: rgba(255,0,0,0.5); 
    } 
} 

#recordButton { 
    display: block; 
    width: 5em; 
    height: 5em; 
    background: salmon; 
    border-radius: 50%; 
    -webkit-animation: pulseGlow 1s ease-in-out 1s infinite; 
} 

Answer 1

짧은 대답은 브라우저가 무엇인가를 렌더링하기 위해 하드웨어 가속을 사용하는 경우에 결정이다; 어떤 특정한 수업이나 스타일에 강요 할 수있는 것이 아닙니다. 그러나 브라우저에서 하드웨어 가속을 사용하는 특정 CSS 속성 (예 : 페이지에서 2D 변환을 수행하는 경우에도 -webkit-transform: translate3d)과 -webkit-transition을 사용할 수 있습니다.

See this article for some notes as well as a list of hardware accelerated properties.

은 특정 애니메이션 문제에 관해서는, 나는 당신이 사용자 상호 작용 또는 자바 스크립트를 (단독 또는 CSS에 추가) 사용하지 않고 발생하는 반복 전환을 얻을 수있을 것입니다 방법을 모르겠어요. -webkit-transition: box-shadow을 가질 수 있지만, 속성 값이 변경 될 때만 전환이 실행되기 때문에 펄스 애니메이션을 반복하는 방법을 모르겠습니다.