스타일 transitionTimingFunction 속성
예시
전환 효과의 속도 곡선 변경:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
정의 및 사용
transitionTimingFunction 속성은 전환 효과의 속도 곡선을 지정합니다.
이 속성을 사용하면 전환 효과가 지속 시간 동안 속도를 변경할 수 있습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
transitionTimingFunction | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransitionTimingFunction |
12.1 |
통사론
transitionTimingFunction 속성을 반환합니다.
object.style.transitionTimingFunction
transitionTimingFunction 속성을 설정합니다.
object.style.transitionTimingFunction = "ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
속성 값
Value | Description |
---|---|
ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)) |
linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0, 0, 1, 1)) |
ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42, 0, 1, 1)) |
ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0, 0, 0.58, 1)) |
ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42, 0, 0.58, 1)) |
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 |
기술적 세부 사항
기본값: | 쉬움 |
---|---|
반환 값: | 요소의 transition-timing-function 속성을 나타내는 String |
CSS 버전 | CSS3 |
관련 페이지
CSS 참조: transition-timing-function 속성
❮ 스타일 개체