스타일 animationTimingFunction 속성
예시
<div> 요소의 animationTimingFunction 속성 변경:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
정의 및 사용
animationTimingFunction은 애니메이션의 속도 곡선을 지정합니다.
속도 곡선은 애니메이션이 한 CSS 스타일 세트에서 다른 세트로 변경하는 데 사용하는 시간을 정의합니다.
속도 곡선은 변경을 부드럽게 만드는 데 사용됩니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Moz 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
통사론
animationTimingFunction 속성을 반환합니다.
object.style.animationTimingFunction
animationTimingFunction 속성을 설정합니다.
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
속성 값
| Value | Description |
|---|---|
| linear | The animation has the same speed from start to end |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly |
| ease-in | The animation has a slow start |
| ease-out | The animation has a slow end |
| ease-in-out | The animation has both a slow start and a slow end |
| cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
| 기본값: | 쉬움 |
|---|---|
| 반환 값: | 요소의 animation-timing-function 속성을 나타내는 문자열 |
| CSS 버전 | CSS3 |
관련 페이지
CSS 참조: animation-timing-function 속성