Html CSS:hover@keyframes动画使图像闪烁_Html_Css_Css Animations

Html CSS:hover@keyframes动画使图像闪烁

html css

Html CSS:hover@keyframes动画使图像闪烁,html,css,css-animations,Html,Css,Css Animations,我有一个动画，我已经将它应用到html元素中的一个元素上了，但是当我将相同的动画应用到另一个元素（img）上时，它就一直在闪烁我的CSS .logo-box { position: absolute; top: 40px; left: 40px; } .logo { height: 35px; } .logo-box:hover { animation: moveInRight 1s ease-in; } @keyframes moveInRight { 0% {

我有一个动画，我已经将它应用到

html

元素中的一个元素上了，但是当我将相同的动画应用到另一个元素（img）上时，它就一直在闪烁

我的CSS

.logo-box {
  position: absolute;
  top: 40px;
  left: 40px;
}
.logo {
  height: 35px;
}
.logo-box:hover {
  animation: moveInRight 1s ease-in;
}

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

.logo框

对于

.header

类是绝对的

我的HTML正文

<body>
    <header class="header">
      <div class="logo-box">
        <img class="logo" src="img/logo-white.png" alt="logo" />
      </div>
      <div class="text-box">
        <h1 class="heading-primary">
          <span class="heading-primary-main">Outdoors</span>
          <span class="heading-primary-sub">is where life happends</span>
        </h1>
      </div>
    </header>
  </body>


户外
是生命发生的地方

有人能帮我解决这个问题吗…

给动画的开始添加一个延迟

.logo框：悬停{
动画：moveInRight在0.5秒内轻松播放1秒；
/*0.5秒是延迟*/
}

解释如果你想知道发生了什么：

这是一个众所周知的问题，实际上与用户体验有关。闪烁问题是由于不透明度造成的。一旦出现

：悬停（事件触发），不透明度变为零。现在，当您将指针指向图像时，由于指针的微动，会触发多个悬停
事件。一个悬停事件结束，第二个悬停事件触发。当悬停
结束且不透明度
达到100%
时，CSS停止动画，第二个悬停
事件使其立即转到0
，即闪烁
。如果添加一些延迟，则鼠标将变得稳定，然后将播放动画
然而，一旦触发了悬停
，CSS就没有提供任何方法来完成动画，也就是说，无论指针是否不再位于元素上，动画都必须完成。
是每个浏览器都会出现闪烁还是仅在Chrome上出现闪烁？@Dai不确定，我只试过铬和边，这是铬，所以我想这没有什么区别。我对这一切有点陌生。