css animation-timing-function函数应用技巧-css教程-PHP中文网

css animation-timing-function函数应用技巧

P粉602998670

发布： 2025-10-22 23:18:02

原创

444人浏览过

animation-timing-function用于控制动画速度曲线，影响动画流畅度。常用关键字如ease、linear、ease-in、ease-out、ease-in-out可实现不同缓动效果，cubic-bezier()函数支持自定义贝塞尔曲线，结合关键帧能分段设置速度，配合animation-duration优化时长，使动画更自然。

css animation-timing-function函数应用技巧

CSS 的 animation-timing-function 属性用于控制动画在关键帧之间执行的速度曲线，直接影响动画的“感觉”——是生硬还是流畅，是弹跳还是缓入缓出。掌握它的使用技巧，能让动画更自然、更具表现力。

理解常见的 timing-function 值

该属性接受多个预设关键字和自定义贝塞尔曲线。常用的关键字包括：

ease：默认值，开始慢 → 中间快 → 结束慢，适合大多数过渡
linear：匀速运动，机械感强，常用于旋转或循环动画
ease-in：缓慢开始，突然结束，适合“出现”类动画
ease-out：快速开始，缓慢结束，让元素“柔和着陆”
ease-in-out：两端慢中间快，对称且优雅，适合来回动画

例如，一个淡入动画使用 animation-timing-function: ease-in; 会比 linear 更有层次感。

使用 cubic-bezier() 自定义速度曲线

通过 cubic-bezier(x1, y1, x2, y2) 可创建任意速度曲线。四个参数代表贝塞尔曲线的两个控制点（x 和 y 值必须在 0~1 之间，但可超出用于特殊效果）。

立即学习“前端免费学习笔记（深入）”；

标准 ease 曲线：cubic-bezier(0.25, 0.1, 0.25, 1.0)
强烈弹跳进入：cubic-bezier(0.68, -0.55, 0.27, 1.55)
快速启动后缓慢结束：cubic-bezier(0.77, 0, 0.18, 1)

推荐使用在线工具如 https://cubic-bezier.com 调试并生成理想曲线。

结合关键帧实现分段速度控制

可在 @keyframes 中为不同阶段设置不同的 timing-function，使用 animation-timing-function 在关键帧内局部覆盖。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

例如，让元素先加速冲出，再缓缓停下：

@keyframes bounce-in {
  0% {
    transform: scale(0);
    animation-timing-function: cubic-bezier(0.22, 0.04, 0.78, 0.44);
  }
  60% {
    transform: scale(1.1);
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(1);
  }
}

登录后复制

这样，从 0% 到 60% 使用自定义加速曲线，从 60% 到 100% 缓慢回弹。