CSS动画时间函数
概述[编辑 | 编辑源代码]
CSS动画时间函数（又称缓动函数，英文：timing-function）是控制动画过程中速度变化规律的函数，它决定了动画在每帧之间的插值方式。通过调整时间函数，开发者可以创建更自然的加速、减速或弹性效果，而不仅仅是线性匀速运动。
在CSS中，时间函数通过以下属性指定：
animation-timing-function（用于关键帧动画）transition-timing-function（用于过渡动画）
基本类型[编辑 | 编辑源代码]
CSS预定义了5种基本时间函数，通过关键词调用：
| 函数名称 | 效果描述 | 数学曲线 |
|---|---|---|
linear |
匀速运动 | 线性函数（） |
ease |
默认值，先加速后减速 | 三次贝塞尔曲线(0.25, 0.1, 0.25, 1) |
ease-in |
逐渐加速 | 三次贝塞尔曲线(0.42, 0, 1, 1) |
ease-out |
逐渐减速 | 三次贝塞尔曲线(0, 0, 0.58, 1) |
ease-in-out |
加速后减速 | 三次贝塞尔曲线(0.42, 0, 0.58, 1) |
代码示例[编辑 | 编辑源代码]
/* 使用预定义函数 */
.box {
transition: transform 2s ease-in-out;
}
.box:hover {
transform: translateX(200px);
}
高级控制：三次贝塞尔曲线[编辑 | 编辑源代码]
当预定义函数不满足需求时，可通过cubic-bezier(p1, p2, p3, p4)自定义速度曲线，其中参数p1和p3需在[0,1]范围内。
曲线编辑器可视化[编辑 | 编辑源代码]
自定义示例[编辑 | 编辑源代码]
/* 弹性效果 */
.elastic {
animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
阶跃函数：steps()[编辑 | 编辑源代码]
对于离散动画（如精灵图帧切换），可使用steps(n, start|end)函数将动画分为n个等距步骤。
| 参数 | 效果 |
|---|---|
steps(4, start) |
每步开始时跳跃 |
steps(4, end) |
每步结束时跳跃 |
打字机效果案例[编辑 | 编辑源代码]
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.typewriter {
animation: typing 3s steps(40, end) infinite;
}
性能优化建议[编辑 | 编辑源代码]
1. 避免使用复杂贝塞尔曲线（如控制点超出[0,1]范围），可能导致计算开销增加。
2. 对移动设备优先使用ease-out或linear以减少重绘。
3. 使用will-change: transform提示浏览器优化硬件加速。
实际应用场景[编辑 | 编辑源代码]
- 加载动画：
ease-out实现平滑减速 - 菜单展开：
cubic-bezier(0.18, 0.89, 0.32, 1.28)创造弹性效果 - 进度条：
linear保持匀速前进