HTML | DOM 样式 animationTimingFunction 属性

animationTimingFunction 属性定义了 CSS 动画中动画进度的速度变化。

语法

animationTimingFunction: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|step-start|step-end|steps(int,start|end)

取值

• ease：默认值。慢起始，快结束。
• linear：匀速运动。
• ease-in：慢起始。
• ease-out：快结束。
• ease-in-out：慢起始和快结束。
• cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，取值范围在0到1之间。
• step-start：动画在开始时立刻跳到下一帧。
• step-end：动画在结束时立刻跳到下一帧。
• steps(int,start|end)：多步动画，必须定义步数和开始和结束状态。

示例

/* 使用默认值ease */
.element {
  animation-timing-function: ease;
}

/* 使用自定义cubic-bezier */
.element {
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

/* 使用step-start */
.element {
  animation-timing-function: step-start;
}

/* 使用steps */
.element {
  animation-timing-function: steps(6, end);
}

浏览器兼容性

animationTimingFunction 属性在所有现代浏览器中支持，并已被标准化。

总结

animationTimingFunction 属性定义 CSS 动画的速度变化方式。使用默认值 ease 可以让动画的开始慢速，结束快速，从而达到自然的过渡效果。如果需要更加复杂的速度变化方式，可以使用自定义的贝塞尔曲线 cubic-bezier、多步动画 steps、立刻跳到下一帧 step-start 和 step-end 等取值。