Style transitionTimingFunction 속성

정의와 사용법

transitionTimingFunction 属性规定了过渡效果的速度曲线。

此属性允许过渡效果在其持续时间内改变速度。

另请参阅：

CSS 참조 매뉴얼：transition-timing-function 속성

实例

改变过渡效果的速度曲线：

document.getElementById("myDIV").style.transitionTimingFunction = "linear";

亲自试一试

语法

返回 transitionTimingFunction 속성：

object.style.transitionTimingFunction

设置 transitionTimingFunction 속성：

object.style.transitionTimingFunction = 
"ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit"

속성 값

值 描述
ease

默认值。规定缓慢开始，然后快速，再然后缓慢结束的过渡效果。

相当于：cubic-bezier(0.25, 0.1, 0.25, 1) 。
linear

规定从开始到结束速度相同的过渡效果。

相当于：cubic-bezier(0, 0, 1, 1) 。
ease-in

规定缓慢启动的过渡效果。

相当于：cubic-bezier(0.42, 0, 1, 1) 。
ease-out

规定缓慢结束的过渡效果。

相当于：cubic-bezier(0, 0, 0.58, 1) 。
ease-in-out

规定缓慢开始和结束的过渡效果。

相当于：cubic-bezier(0.42, 0, 0.58, 1) 。
cubic-bezier(n, n, n, n)

셋트벨류 함수에서 자신의 값을 정의합니다。

가능한 값은 0에서 1 사이의 수치입니다。
initial 이 속성을 기본 값으로 설정합니다. 참조 initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참조 inherit。

기술 세부 사항

기본 값： ease
반환 값： 문자열로, 요소의 transition-timing-function 속성。
CSS 버전： CSS3

浏览器支持

표中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari 오페라
Chrome Edge Firefox Safari 오페라
26.0 10.0 16.0 6.1 12.1