transition-timing-function属性指定切换效果的速度。
此属性允许一个过渡效果,以改变其持续时间的速度。
默认值: | ease |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.transitionTimingFunction="linear" |
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,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) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
transition-timing-function | 26.0
4.0 -webkit- |
10.0 | 16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
转场效果以同样的速度从开始到结束:
为了更好地理解不同的函数值:这里有五个不同的div元素,用5个不同的值:
和上面的例子一样,但指定速度曲线立方贝塞尔曲线函数:
CSS text-indent 属性实例缩进段落的第一行50像素:p{text-indent:50px;}属性定义及使用说明text-indent 属性规定文本块中首行文...
Javascript面向对象设计 -Javascript多属性要在对象上定义多个属性,使用Object.defineProperties()而不是Object.defineProperty...
Javascript面向对象设计 -Javascript对象继承要在对象之间添加继承,指定什么对象应该是新对象“s [[Prototype]]。要在对象之间...
Javascript面向对象设计 - Javascript数据属性数据属性具有两个附加属性。[[Value]]保存属性值。在对象上创建属性时,会自动填充...
JavaScript typeof, null, 和 undefinedJavaScript typeof,null, undefined, valueOf()。 typeof 操作符 你可以使用 typeof 操作...