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

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

组件

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

代码是这样写的：

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

这样

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

我来解答赞 6 收藏

反馈

1 条解答

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