CSS animation-timing-function属性

• 

  定义和用法

  animation-timing-function指定了一个动画的速度曲线。速度曲线定义动画用于从一组CSS样式更改为另一组CSS样式的TIME。速度曲线用于平滑地进行更改。

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

• 

  浏览器支持

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

  属性	Internet Explorer	Chrome	FireFox	Safari	Opera
  属性名称
  animation-timing-function	10.0	43.0 4.0 -webkit-	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;
• 

  实例

  从头到尾以相同的速度播放动画：

  div {
    animation-timing-function: linear;
  }

  尝试一下
• 

  属性值

  属性值	描述
  linear	动画从头到尾具有相同的速度
  ease	默认值。 动画启动缓慢，然后快速，慢慢结束
  ease-in	动画开始很慢
  ease-out	动画结尾很慢
  ease-in-out	动画具有慢启动和慢速结束
  step-start	相当于步骤（1，开始）
  step-end	相当于步骤（1，结束）
  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动画