Html CSS：使悬停动画平滑

我有简单的动画与CSS悬停。我的问题是，当我将鼠标悬停在第一个框上时，动画不是平滑的，但动画是平滑的

所以我需要使这个动画在我悬停的时候平滑

.zoom{ 显示器：flex； 证明内容：中心； } .zoom.box{ 填充：16px； 转变：转变6s； } .zoom.box:悬停{ 转换：scale1.2； 背景色：BD8A3B； 过渡：背景色。6s轻松； } .盒子{ 宽度：200px； 高度：600px； 背景色：DACDBD； } Pwinw wjdnw wndi 5,5 % - 6,6% dwjndwj dwjndw dw wdjwndk wdniwd knj

---

要避免覆盖转换属性，应合并它们：

.zoom{ 显示器：flex； 证明内容：中心； } .zoom.box{ 填充：16px； 过渡：背景色。6s轻松，变换。6s； } .zoom.box:悬停{ 转换：scale1.2； 背景色：BD8A3B； } .盒子{ 宽度：200px； 高度：600px； 背景色：DACDBD； } Pwinw wjdnw wndi 5,5 % - 6,6% dwjndwj dwjndw dw wdjwndk wdniwd knj

---

之所以会发生这种情况，是因为您覆盖了悬停状态下的转换，所以请尝试仅定义一次转换，包括背景色

.zoom{ 显示器：flex； 证明内容：中心； } .zoom.box{ 填充：16px； 过渡：变换。6秒，背景色。6秒轻松； } .zoom.box:悬停{ 转换：scale1.2； 背景色：BD8A3B； } .盒子{ 宽度：200px； 高度：600px； 背景色：DACDBD； } Pwinw wjdnw wndi 5,5 % - 6,6% dwjndwj dwjndw dw wdjwndk wdniwd knj