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 중국어 웹사이트의 기타 관련 기사를 참조하세요!