CSS/js에서 빠르게 흐리게 처리하는 방법은 무엇입니까? (나는 <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">jQuery Transit</a>을 사용하고 있습니다) 애니메이션을 번역 몇 가지 서브 픽셀로 흐린 이미지를 결합 할 때

Question

나는 성능 문제를 겪고 :

filter: blur(5px);^ 

mousemove에, 흐림는 피사계 심도를 시뮬레이션하기 위해 다시 계산됩니다. 움직일 때 요소는 내가 원하는 것처럼 유체처럼 움직이지 않습니다. 당신이 -webkit 브라우저

나는이 가속 수있는 방법을 모든 아이디어/팁에 병을 클릭하면

Demo here

버기 움직임이 나타 납니까?

나는 모든 포커스 단계를 미리 계산하고 불투명도를 사용한다고 생각했지만 이것이 내가 사용할 마지막 해결책이다.

Answer 1

동시에 이미지를 번역하고 크기를 조정하는 것처럼 보이기 때문에 튀어 오름이 발생합니다. 대신 translate3d -webkit-transform: translate3d(x,y,z)을 사용하고 스케일링 대신 z 위치를 수정하십시오. 애니메이션이 하드웨어 가속화되면서 성능 향상에 도움이 될 것입니다.