????? ??? ? ?? ?? ??? ??? ? ??? ?? ?? ?????. 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 ??? ????? ?? ?? ??? ?????!