Zoom缩放动画为啥回弹不自然？

Mc.翌岍提问于 2026-03-15 21:00:21 阅读 68

组件

我写了个简单的hover缩放效果，但鼠标移开时缩回去特别生硬，不像别人那种平滑回弹的感觉。是不是transform和transition配合有问题？

我试过改timing-function，也加了will-change，但还是卡卡的。代码就这几行：

.zoom-item {
  transition: transform 0.3s ease;
}
.zoom-item:hover {
  transform: scale(1.1);
}

我来解答赞 8 收藏

反馈

1 条解答

シ艳丽 Lv1

问题不在transform和transition的配合，你的代码写法本身没问题。

"卡卡的"通常是因为hover和非hover状态用了相同的transition时间。鼠标移开时也是0.3s，感觉就会比较平。改成这种写法：

.zoom-item {

  transition: transform 0.3s ease;

}

.zoom-item:hover {

  transition: transform 0.15s ease-out;

  transform: scale(1.1);

}

hover时快一点（0.15s），移开时慢一点（0.3s），这样手感会自然很多。

如果想要更明显的"弹性"回弹感，可以换个timing-function：

.zoom-item {

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

}

.zoom-item:hover {

  transform: scale(1.1);

}

这个cubic-bezier会让缩放在终点位置稍微"过冲"一下再回去，有种弹性效果。

另外提醒一点：如果你的.zoom-item是display:inline或者本身有其他动画属性，可能会冲突。最好明确加上display: block或者display: inline-block。

2026-03-16 16:04