html - 悬停图像上的 CSS 动画效果不起作用

Question

我在 CSS 中创建了一个动画效果，它在文本上效果很好。我也想在用作图标的 PNG 图像上使用它，但它不起作用。

.logo-box {
  position: absolute;
  top: 40px;
  left: 40px;
}

.logo {
  height: 35px;
}

.logo:hover {
  animation: moveInRight 1.5s ease-out;
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

<div class="logo-box">
  <img class="logo" src="img/logo-white.png">
</div>

Answer 1

不是选择悬停的 .logo 本身(移动它的位置)，而是定位不移动的包装器 (.logo-box)，然后定位.logo 用于动画。而不是

.logo:hover {
  animation: moveInRight 1.5s ease-out;
}

使用

.logo-box:hover .logo {
  animation: moveInRight 1.5s ease-out;
}

示例:

.logo-box {
  position: absolute;
  top: 40px;
  left: 40px;
}

.logo {
  height: 35px;
}

.logo-box:hover .logo {
  animation: moveInRight 1.5s ease-out;
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

<div class="logo-box">
  <img class="logo" src="img/logo-white.png">
</div>