> 웹 프론트엔드 > CSS 튜토리얼 > animation-play-state를 사용하여 애니메이션 일시 중지, 중지 및 숨기기

animation-play-state를 사용하여 애니메이션 일시 중지, 중지 및 숨기기

Susan Sarandon
풀어 주다: 2024-10-21 06:10:30
원래의
515명이 탐색했습니다.

Pausing, Stopping, and Hiding Animations with animation-play-state

애니메이션 작업을 할 때는 모든 사람이 접근할 수 있도록 하는 것이 중요합니다. WCAG SC 2.2.2: 일시 중지, 중지, 숨기기에 따라 사용자는 5초 이상 지속되는 애니메이션을 일시 중지, 중지 또는 숨길 수 있어야 합니다. CSS와 JavaScript를 사용하여 사용자가 제어할 수 있는 애니메이션을 만드는 방법을 분석해 보겠습니다.

간단한 애니메이션

CSS 키프레임을 사용하여 간단한 애니메이션을 만드는 것부터 시작하겠습니다. 이 애니메이션은 상자를 화면에서 수평으로 이동합니다.

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>
로그인 후 복사

플레이 상태 추가

다음으로 animation-play-state 속성을 소개합니다. 이 속성을 사용하면 애니메이션이 실행 중인지 일시 중지되는지 여부를 제어할 수 있습니다. CSS 변수 --play-state를 사용하여 애니메이션의 기본 상태를 설정합니다.

:root {
  --play-state: running;
}

.animated-box {
  animation-play-state: var(--play-state);
}
로그인 후 복사

여기서는 루트 수준에서 --play-state 변수를 정의하고 초기 값을 running으로 설정합니다. 처음에는 애니메이션이 실행되지만 이 변수를 사용하면 나중에 이를 제어할 수 있습니다.

자바스크립트로 컨트롤 추가하기

--play-state 변수를 업데이트하여 사용자가 애니메이션을 일시 중지/재생할 수 있는 버튼을 추가합니다

<button id="toggle-btn">Pause Animation</button>

<script>
  const toggleButton = document.getElementById('toggle-btn');
  const root = document.documentElement;

  toggleButton.addEventListener('click', () => {
    const currentPlayState = getComputedStyle(root).getPropertyValue('--play-state').trim();

    if (currentPlayState === 'running') {
      root.style.setProperty('--play-state', 'paused');
      toggleButton.textContent = 'Resume Animation';
    } else {
      root.style.setProperty('--play-state', 'running');
      toggleButton.textContent = 'Pause Animation';
    }
  });
</script>
로그인 후 복사

getCompulatedStyle을 사용하여 --play-state 변수의 현재 값을 가져옵니다. 애니메이션이 실행 중인지 일시 중지되었는지에 따라 값을 전환하고 그에 따라 버튼의 텍스트도 업데이트합니다.

codepen에서 전체 작업 예제를 찾을 수 있습니다

애니메이션 재생 상태와 같은 간단한 솔루션을 구현하고 애니메이션에 대한 컨트롤을 제공함으로써 보다 포괄적인 디지털 경험을 만드는 데 도움이 됩니다.

위 내용은 animation-play-state를 사용하여 애니메이션 일시 중지, 중지 및 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿