translateZ 트릭

CSS 필터는 훌륭합니다

CSS 필터는 정말 멋집니다. 그들은 다음과 같은 것을 취할 수 있습니다…



...다음과 같이 만듭니다.



좋아. 이와 같은 효과는 CSS 작성의 재미있는 부분입니다.

그리고 blur()는 많은 재미있는 filter 옵션 중 하나일 뿐입니다. 나머지는 나열됩니다here.

CSS 필터는 페이지 안팎 또는 전경 안팎에서 항목에 애니메이션을 적용해야 할 때 특히 유용합니다. 예를 들어 항목이 페이지에서 애니메이션으로 표시될 때 항목을 점점 더 흐리게 처리할 수 있습니다. 또는 사용자가 모달을 열 때 모달 콘텐츠에 대한 사용자의 주의를 유도하기 위해 그 뒤의 페이지를 점진적으로 흐리게 할 수 있습니다.

사파리 문제

불행하게도 CSSfilter 속성에 애니메이션 효과를 주기 시작하면 Safari에서 애니메이션이 심하게 고르지 않다는 것을 알게 될 것입니다.

몇 년 전 직장에서 CSS 필터를 애니메이션화하는 동안 이 문제에 부딪쳤습니다. 그리고 저는 최근에 Scott Tolinski가 한탄하고 Syntax 팟캐스트에서 그가 CSS 필터를 사용하는 것에 흥분했지만 이 Safari 렌더링 문제 때문에 필터를 포기할 수밖에 없었다는 것을 들었습니다.

그러나 수정 사항이 있습니다! 그것이 Scotty를 돕기 위해서만 이 게시물을 작성하는 이유입니다. 😎

수정

Safari에서 문제를 해결하려면 다음을 수행하십시오…

.thing {
  filter: blur(4px);
}

...다음과 같이 변경합니다.

.thing {
  filter: blur(4px);
  transform: translateZ(0);
}

그게 다야. 이제 Safari에서 애니메이션이 원활하게 실행됩니다.

translateZ는 어떻게 도움이 되나요?

애니메이션이 원활하게 실행되는 기본적인 이유translateZ(ANY_VALUE)는 Safari에 CPU 대신 GPU를 사용하여 애니메이션을 렌더링하도록 지시하기 때문입니다.
translateZ(또는 유사한 힌트)가 없으면 Safari는 복잡한 그래픽을 거의 렌더링할 수 없는 CPU를 사용하여 filter 애니메이션을 시도합니다. 필터 효과 애니메이션과 같은 그래픽 집약적인 작업의 경우 GPU가 항상 훨씬 더 나은 작업을 수행합니다.

우리를 도와줘, 사파리

Chrome 및 기타 비 Safari 브라우저는 GPU를 사용하여 이와 같은 애니메이션을 자동으로 하드웨어 가속하지만 Safari는 여전히 동일한 결과를 얻으려면 translateZ와 같은 특정 속성을 추가해야 합니다.

Safari 팀이 곧 이 문제를 해결하여 Scott이 이와 같은 해결 방법을 사용하지 않고도 좋아하는 모든 멋진 CSS 기능을 애니메이션으로 만들 수 있기를 바랍니다.

그때까지 translateZ는 당신의 친구입니다.

관련된 링크들

translateZ | MDN 웹 문서

CSS filter | MDN 웹 문서

CSS Filter Effects landing in WebKit — 2011년에 translateZ가 필요하다고 언급 | Chrome 개발자

Increase Your Site’s Performance with Hardware-Accelerated CSS | 트리하우스

Improving HTML5 App Performance with GPU Accelerated CSS Transitions | 어반 인사이트 ********

CSS GPU Animation: Doing It Right | 스매싱 매거진

Web Performance Fundamentals — 일부 플랫폼에서 하드웨어 가속 CSS 애니메이션을 얻으려면 여전히 translateZ가 필요하다고 요청 | MDN 웹 문서

— 동일한 트릭의 translate3d 버전 제안 | 트위터