애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다.
animation-play-state
animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
특징 | 설명 |
---|---|
기본 값 | animation-play-state : running; |
적용 | animation |
버전 | CSS3 |
사용성 | ★★★★☆ |
정의(Definition)
- animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
애니메이션과 관련된 속성(Animation Related Properties)
- animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
- animation-delay 속성은 애니메이션 지연 시간을 설정합니다.
- animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.
- animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
- animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
- animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다.
- animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
- animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
- animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.
문법(Syntax)
animation-play-state : paused | running | inherit;
/* 기본 애니메이션 속성 */
animation-play-state : paused;
animation-play-state : running
속성(Property)
속성값 | 설명 |
---|---|
paused | 애니메이션의 움직임을 정지시킵니다. |
running | 애니메이션을 움직이게 합니다. |
inherit | 애니메이션 속성을 상속받습니다. |
호환성(Compatibility)
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-play-state | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ |
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function