CSS 动画时间函数

介绍

CSS动画时间函数（也称为缓动函数）是控制动画速度变化的关键工具。它决定了动画在时间轴上的变化速率，例如动画是匀速播放，还是先快后慢，或者先慢后快。通过合理使用时间函数，可以让动画效果更加自然和生动。

在CSS中，时间函数通过 animation-timing-function 或 transition-timing-function 属性来定义。它们接受预定义的关键字（如 ease、linear）或自定义的贝塞尔曲线值。

---

常见的时间函数

CSS提供了几种预定义的时间函数，以下是它们的详细说明：

1. linear
   动画以恒定速度播放，没有加速或减速。
   语法：animation-timing-function: linear;

2. ease
   默认值。动画以慢速开始，然后加速，最后减速结束。
   语法：animation-timing-function: ease;

3. ease-in
   动画以慢速开始，然后逐渐加速。
   语法：animation-timing-function: ease-in;

4. ease-out
   动画以快速开始，然后逐渐减速。
   语法：animation-timing-function: ease-out;

5. ease-in-out
   动画以慢速开始和结束，中间部分加速。
   语法：animation-timing-function: ease-in-out;

6. step-start 和 step-end
   动画以离散的步骤播放。step-start 在动画开始时立即跳到第一帧，step-end 在动画结束时跳到最后一帧。
   语法：animation-timing-function: step-start; 或 animation-timing-function: step-end;

7. steps(n, start|end)
   将动画分为 n 个步骤播放。start 表示在每一步开始时跳转，end 表示在每一步结束时跳转。
   语法：animation-timing-function: steps(4, start);

---

自定义贝塞尔曲线

除了预定义的时间函数，你还可以使用 cubic-bezier() 函数自定义时间函数。贝塞尔曲线由四个控制点定义，语法如下：

css

animation-timing-function: cubic-bezier(x1, y1, x2, y2);

• x1 和 y1 是第一个控制点的坐标。
• x2 和 y2 是第二个控制点的坐标。

例如，以下代码定义了一个先快后慢的动画：

css

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

提示

你可以使用在线工具（如 cubic-bezier.com）来可视化并生成贝塞尔曲线值。

---

实际案例

案例1：按钮悬停效果

以下是一个按钮悬停时背景颜色渐变的动画，使用 ease-in-out 时间函数：

css

.button {
  background-color: #3498db;
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: #2ecc71;
}

案例2：弹跳动画

使用 cubic-bezier() 创建一个弹跳效果：

css

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
}

.ball {
  animation: bounce 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

---

总结

CSS动画时间函数是控制动画速度变化的重要工具。通过预定义的关键字或自定义的贝塞尔曲线，你可以创建出各种自然、生动的动画效果。掌握这些时间函数的使用方法，可以让你的网页动画更加专业和吸引人。

---

附加资源与练习

1. 练习
   尝试为一个元素创建以下动画效果：

   • 使用 ease-in 让元素从左向右移动。
   • 使用 steps(5, end) 创建一个逐帧动画。

2. 资源

   • MDN文档：animation-timing-function
   • cubic-bezier.com：可视化贝塞尔曲线工具