animation-play-state

CSS 애니메이션의 실행과 일시정지를 제어합니다. apsp를 사용하면 호버 시 애니메이션을 멈추거나, JavaScript와 조합하여 토글할 수 있습니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`apsr`	animation-play-state: running	기본값. 애니메이션 정상 실행
`apsp`	animation-play-state: paused	현재 프레임에서 일시정지

클래스별 상세

`apsr`animation-play-state: running

기본값입니다. 애니메이션이 정상적으로 실행됩니다. 일시정지된 애니메이션을 다시 재생할 때 사용합니다.

<!-- Default: animation running -->
<div class="apsr">
  Animation plays normally
</div>

<!-- Resume (JS combination) -->
<div :class="isPaused ? 'apsp' : 'apsr'">
  Toggle play/pause
</div>

`apsp`animation-play-state: paused

애니메이션을 현재 프레임에서 일시정지합니다. 다시 apsr을 적용하면 멈춘 지점부터 재생됩니다.

<!-- Pause animation -->
<div class="apsp">
  Frozen at current frame
</div>

<!-- Pause on hover -->
<div class="hover-apsp">
  Animation pauses on hover
</div>

호버로 일시정지하기

hover-apsp를 사용하면 마우스를 올렸을 때 애니메이션이 멈추고, 떼면 다시 재생됩니다. 무한 회전, 슬라이더 등에 유용합니다.

활용 패턴

호버, JavaScript 등과 조합하여 애니메이션 재생을 제어하는 패턴입니다.

<!-- Pause rotation animation on hover -->
<div class="hover-apsp">
  Rotating element — pauses on hover
</div>

<!-- JavaScript toggle -->
<div :class="isPaused ? 'apsp' : 'apsr'">
  Control play/pause with button
</div>
<button @click="isPaused = !isPaused">
  {{ isPaused ? 'Play' : 'Pause' }}
</button>

<!-- Slider: pause on hover -->
<div class="oh">
  <div class="df hover-apsp">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
  </div>
</div>

팁 & 주의사항

paused는 멈춘 지점을 기억

apsp로 일시정지한 뒤 apsr로 전환하면 처음부터가 아닌 멈춘 지점부터 이어서 재생됩니다.

접근성 고려

연속적인 애니메이션은 일부 사용자에게 불편할 수 있습니다. prefers-reduced-motion 미디어 쿼리를 함께 고려하세요.

animation-fill-mode animation-direction