为什么我的Scale缩放动画在点击时会有跳动？

Des.慧玲提问于 2026-02-11 09:44:38 阅读 35

组件

我给按钮加了scale动画，点击时元素会先突然跳到1.2倍大小再缩小回去，但代码明明写的是过渡0.3秒啊？

代码是这样写的：

.btn {
  transition: transform 0.3s ease;
}
.btn:hover {
  transform: scale(1.2);
}

这样

我试过把transition加到所有属性，或者给初始状态加scale(1)，但都没用。难道是和父元素的布局有关吗？求大神指条明路

我来解答赞 11 收藏

反馈

2 条解答

书生シ瑞红 Lv1

你这个现象我太熟悉了，八成是没给初始状态加 transform，导致 hover 触发时浏览器要先“补”一个从无到有的 transform，这个“补”的过程就跳了。

你现在的写法里，初始状态是 transform: none（默认值），hover 时突然变成 scale(1.2)，浏览器在计算过渡时会把 none 当作起点，而 none 和 scale(1.2) 之间没有明确的变换矩阵，过渡就乱套了，容易出现跳动甚至闪动。

正确做法是给初始状态也显式加上一个 transform: scale(1)，哪怕它看起来和没写一样，但这是告诉浏览器：“我初始状态就是 scale(1)，不是 none”，这样 hover 时就能平滑插值了。

改一下：

.btn {

  transform: scale(1);

  transition: transform 0.3s ease;

}



.btn:hover {

  transform: scale(1.2);

}

顺带一提，如果你用了 transform，最好也把 will-change: transform 加上，减少重绘开销，虽然这不是你这个问题的主因，但作为老后端我习惯性提醒一句——性能这事儿，早埋点伏笔总没坏处。

另外，如果按钮里有文字，确认下有没有因为 scale 导致的字体抗锯齿突变（某些浏览器在缩放时字体渲染策略会切换），不过这种情况一般只是轻微模糊，不会跳动，你这个大概率还是 transform 起点没对齐的问题。

2026-02-27 14:08

Prog.奕冉 Lv1

最简单的办法是在初始状态就加上 transform: scale(1)，让浏览器知道是从哪个状态开始过渡。

.btn {

  transform: scale(1);

  transition: transform 0.3s ease;

}

.btn:hover {

  transform: scale(1.2);

}

2026-02-11 10:03