CSS animation-timing-function 속성
예시
처음부터 끝까지 같은 속도로 애니메이션을 재생합니다.
div {
animation-timing-function: linear;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
animation-timing-function
애니메이션의 속도 곡선을 지정합니다 .
속도 곡선은 애니메이션이 한 CSS 스타일 세트에서 다른 세트로 변경하는 데 사용하는 시간을 정의합니다.
속도 곡선은 변경을 부드럽게 만드는 데 사용됩니다.
기본값: | 쉬움 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.animationTimingFunction="선형" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
animation-timing-function | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS 구문
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
animation-timing-function은 Cubic Bezier 곡선이라고 하는 수학 함수를 사용하여 속도 곡선을 만듭니다. 이 함수에서 고유한 값을 사용하거나 미리 정의된 값 중 하나를 사용할 수 있습니다.
속성 값
Value | Description | Play it |
---|---|---|
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 | |
step-start | Equivalent to steps(1, start) | |
step-end | Equivalent to steps(1, end) | |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "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 |
팁: 아래의 "추가 예" 섹션에서 다른 값을 시도해 보십시오.
더 많은 예
예시
다른 타이밍 기능 값을 더 잘 이해하기 위해;
다음은 5개의 다른 값을 갖는 5개의 다른 <div> 요소입니다.
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
예시
위의 예와 같지만 속도 곡선은 3차 베지어 함수로 정의됩니다.
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
관련 페이지
CSS 튜토리얼: CSS 애니메이션
HTML DOM 참조: animationTimingFunction 속성