Html 如何使我的img:hover代码与两种不同的代码一起工作？

如何使一个图像具有动画（悬停），而不必添加img:hover，因为一旦我添加另一个带有悬停元素的图像，它就会中断代码。我希望猫的图像在悬停时抖动，但玫瑰的图像不抖动

#对{
}
img：悬停{
/*启动抖动动画并使动画持续0.5秒*/
动画：抖动0.5s；
/*动画完成后，重新开始*/
动画迭代次数：无限；
}
@关键帧抖动{
0%{变换：平移（1px，1px）旋转（0deg）；}
10%{变换：平移（-1px，-2px）旋转（-1deg）；}
20%{变换：平移（-3px，0px）旋转（1deg）；}
30%{变换：平移（3px，2px）旋转（0deg）；}
40%{变换：平移（1px，-1px）旋转（1deg）；}
50%{变换：平移（-1px，2px）旋转（-1deg）；}
60%{变换
：平移（-3px，1px）旋转（0度）；}
70%{变换：平移（3px，1px）旋转（-1deg）；}
80%{变换：平移（-1px，-1px）旋转（1deg）；}
90%{变换：平移（1px，2px）旋转（0度）；}
100%{变换：平移（1px，-2px）旋转（-1deg）；}
}
罗斯先生{
位置：绝对位置；
高度：60px；
位置：绝对位置；
右：10%；
底部：65%；
z指数：10；
}

img将以您已经体验过的页面上的所有图像为目标。您可以使用不同的CSS选择器，例如class.rose，只针对rose。因为猫被包裹在一个ID为#yes的div中，所以你只能用它来瞄准猫

更新代码如下：

#是：悬停{
/*启动抖动动画并使动画持续0.5秒*/
动画：抖动0.5s；
/*动画完成后，重新开始*/
动画迭代次数：无限；
}
@关键帧抖动{
0%{变换：平移（1px，1px）旋转（0deg）；}
10%{变换：平移（-1px，-2px）旋转（-1deg）；}
20%{变换：平移（-3px，0px）旋转（1deg）；}
30%{变换：平移（3px，2px）旋转（0deg）；}
40%{变换：平移（1px，-1px）旋转（1deg）；}
50%{变换：平移（-1px，2px）旋转（-1deg）；}
60%{变换
：平移（-3px，1px）旋转（0度）；}
70%{变换：平移（3px，1px）旋转（-1deg）；}
80%{变换：平移（-1px，-1px）旋转（1deg）；}
90%{变换：平移（1px，2px）旋转（0度）；}
100%{变换：平移（1px，-2px）旋转（-1deg）；}
}
罗斯先生{
位置：绝对位置；
高度：60px；
位置：绝对位置；
右：10%；
底部：65%；
z指数：10；
}

不会影响悬停时的所有图像。因此，您必须使用不同的选择器分离动画。例如：

.rose:hover
.cat:hover 

---

可以将动画放入仅用于动画的类中。比如：

img {
  width: 50px;
  height: 50px;
}

.imgAnimation:hover {
  animation: example 4s ease-in-out infinit;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform
: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

然后你可以把你悬停动画的类放到你想要的图像中

<div class="container">
  <img src="img1.png">
  <img class="imgAnimation" src="img2.jpg">
  <img class="imgAnimation" src="img3.jpg">
</div>

<div class="container">
  <img src="img1.png">
  <img class="imgAnimation" src="img2.jpg">
  <img class="imgAnimation" src="img3.jpg">
</div>