이라는 두 가지 요소가 있는 페이지를 렌더링합니다. 이 페이지는 style.css라는 CSS 파일도 가져옵니다.
<!DOCTYPE html>
두 요소의 스타일을 모두 지정하려면 HTML과 동일한 폴더에 style.css 파일을 만들고 다음을 추가하세요.
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
이러한 스타일은 두 가지 구성요소를 생성합니다.
페이지가 로드될 때 회전하고 색상이 변경되는 간단한 상자입니다.
마우스를 올려놓으면 배경색이 바뀌는 버튼입니다.
빨간색 상자는 CSS @keyframe 지시문을 사용하여 애니메이션을 적용하는 반면 버튼은 전환을 사용합니다. 이를 통해 브라우저의 DevTools를 사용하여 두 가지 접근 방식을 비교할 수 있습니다.
Chrome DevTools의 애니메이션 탭에 액세스하려면:
페이지를 마우스 오른쪽 버튼으로 클릭하면 상황에 맞는 메뉴가 나타납니다.
검사를 클릭하세요.
오른쪽 상단에 있는 세 개의 점을 클릭하세요.
추가 도구 > 애니메이션으로 이동합니다.
그러면 하단 섹션에 애니메이션 서랍이 열립니다.
페이지에서 발생하는 모든 애니메이션이 여기에 표시됩니다. 페이지를 새로 고치고 버튼 위에 마우스를 올리면 애니메이션 탭 아래에 애니메이션이 표시됩니다.
이러한 애니메이션 중 하나를 클릭하면 진정한 힘이 발휘됩니다. 예를 들어 상자의 애니메이션을 클릭하면 브라우저가 다음과 같이 키프레임을 표시하는 것을 볼 수 있습니다.
DevTools는 선택한 요소와 관련된 모든 애니메이션을 표시합니다. 빨간색 상자에 대해 정의된 단일 애니메이션(rotateAndChangeColor)만 있으므로 해당 세부정보만 볼 수 있습니다.
선을 왼쪽으로 끌어 애니메이션을 훨씬 빠르게 만들거나 오른쪽으로 끌어 애니메이션 속도를 늦출 수 있습니다. 일시 중지 및 재생 아이콘을 전환하여 특정 지점에서 애니메이션을 일시 중지할 수도 있습니다. 상단의 백분율을 사용하면 애니메이션을 각각 일반 속도의 1/4 및 1/10 속도로 재생할 수 있습니다.
버튼 전환을 검사하면 DevTools는 전환의 개별 속성(색상 및 배경색)을 표시합니다.
이 도구를 사용하면 애니메이션을 조작하여 정확히 어떻게 작동하는지 확인할 수 있습니다. 문제가 있는 경우 이를 사용하여 웹사이트 문제를 해결할 수 있습니다.
HTML
태그 내의 마크업을 다음 마크업으로 바꾸는 것부터 시작하세요.
<div class="move-me move-me-1">steps(4, end)</div>
그런 다음 style.css 파일의 모든 스타일을 다음으로 바꾸십시오.
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
모든
요소에는 위치와 배경색을 전환하는 단계별 이동 애니메이션이 적용되어 있습니다. 게다가 각 상자에는 소요되는 단계 수를 제어하기 위한 서로 다른 애니메이션이 있습니다.
세 번째 상자가 꾸준히 오른쪽으로 미끄러지는 동안 처음 두 상자는 모두 화면 끝에 도달할 때까지 한 번에 두 단계씩 이동합니다(두 번째 상자는 첫 번째 상자 앞에서 시작함).
DevTools에서 애니메이션 탭을 열고 페이지를 새로 고치면 다음 애니메이션과 관련된 모든 정보를 찾을 수 있습니다.
같은 기간 동안 모두 움직이는 여러 요소가 있습니다. 이 시나리오에서는 세 상자 모두에 대해 배경색과 상자 위치가 동시에 애니메이션됩니다.
주목해야 할 또 다른 사항은 각 애니메이션 라인의 노드입니다. 애니메이션이 무한 횟수 발생하면 노드는 애니메이션에서 각 반복이 시작되고 끝나는 위치를 표시합니다.
빈 노드는 기본적으로 애니메이션의 키프레임이고, 단색의 색상 노드는 애니메이션의 시작과 끝을 나타냅니다. 애니메이션이 다시 시작될 때마다 어두운 색상의 노드가 표시됩니다.
마지막으로 CSS 속성과 마찬가지로 DevTools를 사용하여 애니메이션을 편집할 수 있습니다. 애니메이션 UI를 사용하여 변경한 모든 내용은 스타일 탭 아래의 인라인 스타일에 표시되며 그 반대의 경우도 마찬가지입니다. 이를 통해 변경하고, 테스트하고, 실제 프로젝트에 복사할 수 있습니다.
Google Chrome의 DevTools 기능은 애니메이션을 포함하여 CSS를 디버깅하기 위한 멋진 도구입니다. 페이지의 모든 전환과 애니메이션에 대한 자세한 보기를 제공하므로 모든 단계에서 무슨 일이 일어나고 있는지 정확하게 확인할 수 있습니다.
웹 개발자로서 귀하는 브라우저의 DevTools 기능 또는 이에 상응하는 기능에 익숙해야 합니다.
