스타일 애니메이션 속성
예시
단축 속성을 사용하여 <div> 요소의 애니메이션 변경:
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
정의 및 사용
animation 속성은 다음 6가지 애니메이션 속성에 대한 약식 속성입니다.
animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection
참고: 항상 animationDuration 속성을 지정하십시오. 그렇지 않으면 지속 시간이 0이고 재생되지 않습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Webkit, Moz 또는 O 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
animation | 43.0 4.0 Webkit |
10.0 | 16.0 5.0 Moz |
9.0 4.0 Webkit |
30.0 15.0 Webkit 12.1 12.0 O |
통사론
애니메이션 속성을 반환합니다.
object.style.animation
애니메이션 속성을 설정합니다.
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
속성 값
Value | Description |
---|---|
animationName | Specifies the name of the keyframe you want to bind to the selector |
animationDuration | Specifies how many seconds or milliseconds an animation takes to complete |
animationTimingFunction | Specifies the speed curve of the animation |
animationDelay | Specifies a delay before the animation will start |
animationIterationCount | Specifies how many times an animation should be played |
animationDirection | Specifies whether or not the animation should play in reverse on alternate cycles |
animationFillMode | Specifies what values are applied by the animation outside the time it is executing |
animationPlayState | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 없음 0 용이함 0 1 보통 없음 실행 중 |
---|---|
반환 값: | 요소의 애니메이션 속성을 나타내는 문자열 |
CSS 버전 | CSS3 |
관련 페이지
CSS 참조: 애니메이션 속성