html - 在页面加载时播放的 CSS 悬停动画

Question

我一直在玩纯 CSS 的悬停动画，将动画应用于元素:悬停，然后将相同的动画反向应用于常规元素，这样当鼠标移开时，元素会返回到其原始状态，这工作正常，但是当用户将鼠标从元素移开时触发的任何动画也会在页面加载时运行。我明白为什么会这样，但我想知道是否有办法完全阻止它？最好不要使用 JS，但我不知道这怎么可能

正在使用的当前代码，悬停时的简单动画:

.image{
  animation: hoverout 1s ease-in-out forwards;
}

.image:hover{
  animation: hover 1s ease-in-out forwards;
}

@keyframes hover{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 0.5;
  }
}

@keyframes hoverout{
  0%{
    opacity: 0.5;
  }

  100%{
    opacity: 0;
  }
}

Answer 1

您不需要在如此简单的悬停上使用动画 和关键帧。请改用 transition。 transition 只是在 2 点之间转换，在本例中是在悬停状态和非悬停状态之间。

它看起来像这样:

.image {
  opacity: 0;
  transition: opacity 300ms;
}

.image:hover {
  opacity: 1;
}

在这种情况下，我将 opacity 设置为在悬停时过渡。您可以使用逗号为其添加更多值，例如 transition: opacity 300ms, color 300ms 或通过转换所有内容来简化它 transition: all 300ms，尽管这将需要更多性能。