📅 最后修改于: 2023-12-03 14:40:18.825000 🧑 作者: Mango
transition-timing-function 属性定义过渡动画的速度曲线。它指定了CSS动画时间内以何种速率进行变化。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|step-start|step-end|steps(int,start|end)
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)：使用自己定义的贝塞尔曲线函数，其中的 n 是 0 到 1 之间的数值。例如，cubic-bezier(0.1, 0.7, 1.0, 0.1) 表示曲线的起点是（0.1, 0.7），终点是（1.0, 0.1）。step-start：立即从起点开始动画。step-end：立即到达终点。steps(int,start|end)：让动画分成指定的若干段，每段分别均分整个动画时间，int 表示分成的段数， start 或 end 表示是从起点还是终点开始动画。例如，steps(4, end) 表示动画被分成 4 段，每段长度相等，从终点开始动画。