DevTools 팁: CSS 애니메이션을 검사하고 수정하는 방법

Sofia Emelianova

Chrome DevTools 애니메이션 탭은 속도를 늦추고, 재생하고, CSS 애니메이션 타이밍을 조정하고, 결과를 즉시 확인하는 데 도움이 되는 강력한 도구입니다.

애니메이션 탭을 열면 애니메이션이 자동으로 녹화되고 편리하게 그룹화되며 다음 작업을 할 수 있습니다.

• 애니메이션을 재생하고 속도를 늦춰 더 잘 검사할 수 있습니다.
• CSS 값을 추측하고 수동으로 설정하는 대신 타임라인에서 점을 드래그하여 길이, 타이밍, 지연 시간을 조정합니다.

또한 요소 > 스타일 창에서 이완 편집기를 사용하여 이완 타이밍을 수정하고 맞춤 cubic-bezier 곡선 값을 설정할 수 있습니다. 자세한 내용은 이중 편집기로 애니메이션 및 전환 타이밍 수정하기를 참고하세요.

실습 환경에서 학습하려면 CSS 애니메이션 효과 검사 및 수정 가이드를 따르세요.