CSS 애니메이션 상태 및 재생 시간을 해킹합니다

이 기사는 CSS 애니메이션을 조작하는 것을 탐구하고, 특히 JavaScript를 사용하지 않고 애니메이션을 다시 시작하고 속도를 늦추는 문제를 해결합니다. 저자는 CSS 전용 Wolfenstein 3D에서 영감을 얻은 게임을 구축 한 경험에 대해 이야기하며, 특히 두 가지 까다로운 애니메이션 문제를 강조합니다.

핵심 문제는 브라우저의 애니메이션 상태 처리와 관련이 있습니다. 애니메이션이 이미 실행중인 동안 애니메이션 속성을 추가하거나 수정한다고해서 항상 예상대로 다시 시작하거나 속도가 느려지지는 않습니다.

문제 1 : 애니메이션 재생

저자는 애니메이션 재생에 대한 몇 가지 접근법을 탐구합니다.

• 다중 확인란 (비효율적) : CSS는 기존 애니메이션 만 계속해서 다시 시작하지 않기 때문에 각 애니메이션 시도에 별도의 확인란을 사용하면 실패합니다.
• 애니메이션 복제 : 각 트리거 작업에 대해 별개의 애니메이션 이름 ( spin1 , spin2 )을 만들지 만 신중한 CSS 규칙 순서가 필요합니다.
• 추가 애니메이션 : animation-name 속성에 동일한 애니메이션을 여러 번 추가하는 것도 기능하지만 animation-fill-mode: forwards 로 예기치 않은 동작으로 이어질 수 있습니다.

주요 테이크 아웃은 CSS 애니메이션을 직접 다시 시작할 수 없다는 것입니다. 새 것을 추가해야합니다.

문제 2 : 슬로우 모션

애니메이션이 실행되는 동안 animation-duration 변경하면 Jarring 점프가 발생합니다. 브라우저는 현재 상태가 아니라 애니메이션의 시작부터 새로운 지속 시간을 적용합니다.

몇 가지 접근법이 탐색됩니다.

• 직접 animation-duration 변경 (비효율적) : animation-duration 변경 중간 애니메이션은 시각적 결함을 유발합니다.
• 느린 애니메이션을 일시 중지하고 추가하면 원래 애니메이션을 일시 중지하고 같은 시작점을 가진 느린 애니메이션을 추가하면 예측할 수없는 일시 정지 지점으로 인해 여전히 점프가됩니다.
• 사용자 정의 속성 사용 : 보다 정교한 방법은 사용자 정의 속성 ( --angle1 , --angle2 )을 사용하여 애니메이션의 진행 상황을 추적하고 다른 지속 시간을 가진 애니메이션 간의 원활하게 전환합니다. 그러나 @property 에 대한 브라우저 지원이 필요합니다.
• "기어 변화"기술 : 이 영리한 기술은 각각 애니메이션과 함께 중첩 된 div를 사용하여 애니메이션 속도 사이를 전환합니다. 애니메이션 특정이며 일반화되지 않습니다.
• JavaScript Solutions : JavaScript는 애니메이션 진행 상황을 처리하고 다양한 애니메이션 속도간에 완벽하게 전환하여 복잡한 애니메이션에 유연성을 제공하는보다 강력한 솔루션을 제공합니다.

이 기사는 다른 CSS 전용 프로젝트의 영감을 인정하고 CSS 애니메이션 조작과 관련된 도전과 솔루션에 대한 포괄적 인 개요를 제공함으로써 마무리됩니다. 저자는 독자들이 제공된 예를 탐색하고 그들의 생각을 공유하도록 권장합니다.

위 내용은 CSS 애니메이션 상태 및 재생 시간을 해킹합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!