CSS transition-timing-function属性

• 

  定义和用法

  transition-timing-function属性指定过渡效果的速度曲线。此属性允许转换效果在其持续时间内更改速度。

  特征	说明
  默认值	ease
  继承	没有
  动画	没有。CSS动画参考
  CSS版本	CSS3
  JavaScript语法	object.style.transitionTimingFunction="linear"尝试一下

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  属性	IE/Edge	Chrome	FireFox	Safari	Opera
  属性名称
  transition-timing-function	10.0+	26.0 4.0 -webkit-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

• 

  CSS语法

  transition-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;
• 

  实例

  从开始到结束具有相同速度的过渡效果：

  div {
    transition-timing-function: linear;
  }

  尝试一下
• 

  属性值

  属性值	描述
  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)）
  step-start	相当于steps(1,start)
  step-end	相当于steps(1,end)
  steps(int,start|end)	指定带有两个参数的步进功能。第一个参数指定函数中的间隔数。它必须是正整数（大于0）。第二个参数是可选的，它是值“start”或“end”，并指定值在区间内发生变化的点。如果省略第二个参数，则给出值“end”
  cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值。可能的值是从0到1的数值
  initial	将此属性设置为其默认值。查看initial关键字
  inherit	从其父元素继承此属性。查看inherit关键字

• 

  相关页面

  HTML教程：HTML样式

  CSS教程：CSS过渡