求助：CSS中hover伪类动画无法正常生效的问题排查

你的hover效果没生效，问题出在CSS选择器的写法上：

• 原代码里的.gelatine :hover带了个空格，这个选择器的含义是选中带gelatine类的元素下面的所有子元素，当子元素被鼠标悬停时触发动画，但你的图片本身就是带gelatine类的元素，它下面没有子元素，所以动画根本不会触发。

修复后的代码 #

把选择器里的空格删掉，改成.gelatine:hover，这样就能正确选中图片本身的悬停状态：

<style>
.gelatine:hover{
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
</style>

HTML部分无需修改：

<div>
    <img class="gelatine" src="video-icon-1.png" alt="">
</div>

小提示 #

要是想让鼠标移开后动画能平滑停止，可以给元素加个过渡效果：

.gelatine{
  transition: all 0.2s ease;
}
.gelatine:hover{
  animation: gelatine 0.5s infinite;
}

内容的提问来源于stack exchange，提问作者HOW TO