Sofia Emelianova
Chrome DevTools의 애니메이션 탭은 속도를 늦추고, 다시 재생하고, CSS 애니메이션 타이밍을 조정하고, 결과를 즉시 볼 수 있는 강력한 도구입니다.
애니메이션 탭이 열려 있으면 애니메이션을 자동으로 기록하고 편리하게 그룹화하며 다음 작업을 수행할 수 있습니다.
- 애니메이션을 더 잘 검사하려면 애니메이션을 다시 재생하고 속도를 늦추세요.
- CSS 값을 직접 추측하고 설정하는 대신 타임라인에서 지점을 드래그하여 기간, 타이밍 및 지연을 조정할 수 있습니다.
또한 요소 > 스타일 창에서 이징 편집기를 사용하여 이징 타이밍을 수정하고 맞춤 cubic-bezier 곡선 값을 설정할 수 있습니다. 자세한 내용은 이징 편집기로 애니메이션 및 전환 타이밍 수정을 참고하세요.
더 많은 실습을 하려면 CSS 애니메이션 효과 검사 및 수정 가이드를 따르세요.