如何避免鼠标悬停时元素重缩放？CSS多动画冲突问题问询

1. 重缩放原因及解决方法 #

原因：你当前的写法里，.box和.shake都直接使用了animation简写属性，而CSS中相同优先级的选择器，后定义的样式会覆盖前一个。初始时.shake的animation完全覆盖了.box的scaleOnLoad动画；当你移除.shake类时，浏览器会重新应用.box的animation属性，相当于重新触发了这个缩放动画，所以会看到元素再次缩放。本质是两个类的animation是覆盖关系，而非叠加。

解决方法：不要用animation简写来替换整个动画，而是通过逗号分隔多个动画的方式让它们共存，同时给缩放动画加上forwards关键字，让动画结束后保持最后一帧的状态。修改后的CSS如下：

.box{ 
  display:block; 
  width:100px; 
  height:100px; 
  background:green; 
  animation: scaleOnLoad .5s ease 1s forwards; /* forwards 保持动画结束状态 */
}
@keyframes scaleOnLoad { 
  0%{ transform: scale(.2); } 
  100%{ transform: scale(1); } 
}
/* 用逗号追加抖动动画，而非覆盖原有动画 */
.shake { 
  animation: scaleOnLoad .5s ease 1s forwards, shakeOnHover .1s linear infinite; 
}
@keyframes shakeOnHover { 
  0% { transform: rotate(1deg); } 
  33% { transform: rotate(0deg); } 
  66% { transform: rotate(-1deg); } 
  100% { transform: rotate(0deg); } 
}

这样移除.shake类时，.box的scaleOnLoad已经执行完毕并保持了最终状态，不会重新触发。

2. 加载动画未触发原因 #

原因：还是因为.shake类的animation覆盖了.box的animation。初始时元素同时拥有两个类，而.shake在CSS中定义在.box之后，相同优先级的类选择器，后定义的样式会生效，所以加载时实际运行的是shakeOnHover动画，scaleOnLoad被完全覆盖了，自然看不到缩放效果。

解决方法：用上文的修改方式，让两个动画共存，加载时.box的缩放动画会正常执行，同时.shake的抖动动画也会运行。

3. 元素能否同时绑定多个动画，还是会被覆盖？ #

可以同时绑定多个动画，但不能像你原来那样用多个类分别定义animation简写属性（会互相覆盖）。正确的做法是：

• 在同一个animation声明中用逗号分隔多个动画，比如animation: anim1 1s, anim2 2s infinite;
• 或者分别设置animation-name等子属性，比如animation-name: anim1, anim2;，再配合其他子属性（animation-duration、animation-iteration-count等）来配置每个动画。

只要用这种方式，多个动画就可以同时在元素上运行，不会互相覆盖。

内容的提问来源于stack exchange，提问作者Al Ex Tsm