缓动函数怎么让动画更自然？

Dev · 佳宁提问于 2026-03-16 20:18:18 阅读 69

交互

我用CSS写了个简单的hover动画，但感觉太生硬了，想加个缓动效果让它顺滑点。

试过transition-timing-function: ease-in-out，但还是不够理想，是不是得用贝塞尔曲线自己调？

比如下面这段代码，怎么改才能让按钮弹起来的感觉更真实？

.btn {
  transition: transform 0.3s ease-in-out;
}
.btn:hover {
  transform: scale(1.1);
}

我来解答赞 12 收藏

反馈

2 条解答

码农梓淇 Lv1

这个问题的关键在于缓动函数的选择和调整。默认的ease-in-out虽然比线性效果好，但确实不够细腻。用自定义贝塞尔曲线可以实现更真实的动画效果。

首先得明白缓动函数是怎么工作的。它控制着动画的速度变化，比如从慢到快再到慢这种感觉。对于按钮放大效果，我们希望开始时加速不要太猛，结束时减速要平滑一些。

试试这个优化后的版本：

.btn {

  /* 自定义贝塞尔曲线，前半段缓慢加速 */

  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);

}



.btn:hover {

  transform: scale(1.1); 

}

这里把持续时间延长到0.4秒，让动画有更多时间"呼吸"。贝塞尔曲线参数经过调试，能产生更自然的弹起感。前面两个数0.42和0控制开始的加速度，后面两个0.58和1控制结束时的减速。

如果还想更真实点，可以再微调一下曲线参数。不过记得别改太夸张，保持在0到1之间。调试这东西就是个反复试验的过程，有时候调来调去也挺烦人，但效果出来的时候还是很值得的。

2026-03-26 22:07

闲人秋花 Lv1

确实，ease-in-out太平淡了。用cubic-bezier整点过冲（overshoot）效果，弹起来才带感。

.btn {

  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.btn:hover {

  transform: scale(1.1);

}

这个曲线会让scale超过1.1再弹回来，视觉上就有弹性那味儿了。参数自己微调着玩就行，第三个数改成0.5左右会弹得更猛。

2026-03-17 16:13