animation-timing-function

描述

该 animation-timing-function 属性确定动画的速度曲线（使用数学函数 - 三次贝塞尔曲线）。速度曲线定义用于将一组 CSS 样式更改为另一组 CSS 样式的动画时间。

效果展示

语法

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
  step-start | step-end | steps(<integer>[, [ start | end]]?) | cubic-bezier(
    <number>,
    <number>,
    <number>,
    <number>
  );

值

• 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(<integer>[, [ start | end ] ]?) 指定采用两个参数的上述步进函数。第一个参数指定函数中的间隔数。它必须是正整数（大于 0）。第二个参数是可选的，是值“开始”或“结束”，并指定值在间隔内发生更改的点。如果省略第二个参数，则为其赋值“end”。
• cubic-bezier(<number>, <number>, <number>, <number>) 指定三次贝塞尔曲线。这四个值将曲线的点 P1 和 P2 指定为 （x1， y1， x2， y2）。两个 x 值都必须在 [0， 1] 范围内，否则定义无效。y 值可以超出此范围。