CSS Transition Animation Shake : 애니메이션이있을 때 왜 내 요소가 흔들리는가, 어떻게 해결 하는가?

CSS 전환 애니메이션 지터 : 영리하게 애니메이션 지연의 문제를 해결합니다.

CSS transition 속성을 사용하여 애니메이션 효과를 생성 할 때 종종 성가신 애니메이션 지터가 발생합니다. 예를 들어, 마우스가 호버링 될 때 요소가 위쪽으로 이동하고 transition 통해 원활한 전환을 달성하기를 원합니다.

 마진 바닥 : 64px;
전환 : 마진-바닥 0.3s 용이성;
윌 체인 : 마진 바닥;

그러나 실제 효과로 인해 애니메이션 경계에서 요소가 반복적으로 흔들릴 수 있습니다. 이는 transition 과 함께 margin-bottom 사용하면 브라우저의 미묘한 차이로 인해 레이아웃을 계산할 때 애니메이션이 더러워 질 수 있기 때문입니다.

애니메이션 지터를 피하는 방법?

효과적인 솔루션은 margin-bottom 대신 transform 속성을 사용하여 요소 변위를 달성하는 것입니다. transform 속성은 릴리스 레이아웃 재정렬 및 ​​리 그리기를 트리거하지 않으므로 지터를 효과적으로 피합니다.

다음 코드는 transform 속성을 사용하여 동일한 상향 이동 애니메이션을 구현합니다.

 변환 : Translatey (-20px); /* 번역기를 사용하여 더 명확하게*/
전환 : 0.3S 편의를 변환합니다.

요소를 20 픽셀로 수직으로 움직이고 transition 사용하여 transform 의 전환 효과를 제어함으로써 부드러운 애니메이션을 달성하고 margin-bottom 으로 인한 지터 문제를 완전히 해결할 수 있습니다. transform 속성 의이 기능은 이러한 애니메이션 지터 문제를 다루기위한 최상의 선택입니다.

위 내용은 CSS Transition Animation Shake : 애니메이션이있을 때 왜 내 요소가 흔들리는가, 어떻게 해결 하는가?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!