본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/CSS

[CSS] animation-play-state

animation-play-state

animation-play-state 속성은 애니메이션 진행상태를 설정합니다.


animation-play-state

animation-play-state 속성은 애니메이션 진행상태를 설정합니다.

정의(Definition)

  • animation-play-state 속성은 애니메이션 진행상태를 설정합니다.

문법(Syntax)

animation-play-state : paused | running | inherit;

속성(Property)

속성값 설명
paused 애니메이션의 움직임을 정지시킵니다.
running 애니메이션을 움직이게 합니다.

Sample1

클릭하면 애니메이션이 플레이하고 정지하는 예제입니다.

결과
state
CSS
.state > div.running {animation: move2 3s 10 ease running;}
.state > div.paused {animation: move2 3s 10 ease paused;}

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
animation-play-state 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • CSS Animations

AD

comments