animation-play-state

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

클래스 목록

클래스	CSS	설명
`apsr`	animation-play-state: running	기본값. 애니메이션 정상 실행
`apsp`	animation-play-state: paused	현재 프레임에서 일시정지

클래스별 상세

`apsr`animation-play-state: running

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

<!-- 기본값: 애니메이션 실행 -->
<div class="apsr">
  애니메이션이 정상적으로 재생됩니다
</div>

<!-- 일시정지 해제 (JS와 조합) -->
<div :class="isPaused ? 'apsp' : 'apsr'">
  토글로 재생/일시정지 전환
</div>

`apsp`animation-play-state: paused

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

<!-- 애니메이션 일시정지 -->
<div class="apsp">
  현재 프레임에서 멈춤
</div>

<!-- 호버 시 일시정지 -->
<div class="hover-apsp">
  마우스를 올리면 애니메이션이 멈춤
</div>

호버로 일시정지하기

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

활용 패턴

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

<!-- 호버 시 회전 애니메이션 일시정지 -->
<div class="hover-apsp">
  회전 중인 요소 — 호버하면 멈춤
</div>

<!-- JavaScript 토글 -->
<div :class="isPaused ? 'apsp' : 'apsr'">
  버튼으로 재생/일시정지 제어
</div>
<button @click="isPaused = !isPaused">
  {{ isPaused ? '재생' : '일시정지' }}
</button>

<!-- 슬라이더: 호버 시 멈추기 -->
<div class="oh">
  <div class="df hover-apsp">
    <div>슬라이드 1</div>
    <div>슬라이드 2</div>
    <div>슬라이드 3</div>
  </div>
</div>

팁 & 주의사항

paused는 멈춘 지점을 기억

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

접근성 고려

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

animation-fill-mode animation-direction