在悬停中定义另一个动画时动画重复答案

【问题标题】：Animation repeats when another animation is defined in hover在悬停中定义另一个动画时动画重复
【发布时间】：2020-09-27 19:16:09
【问题描述】：

我想在页面加载时制作动画。我在#logo 中定义的动画如果在#logo:hover 中定义了另外一个动画并且我将鼠标从徽标上移开，则会重复。如何解决？

Demo

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

#logo {
    transition: 0.3s;
    animation: popout 1s ease;
}

#logo:hover {
    filter: invert(1);
    animation-name: pulse_logo;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

【问题讨论】：

这是设计使然，因为您正在更改 animation 属性。对它的“修复”将涉及让 JavaScript 在加载后更改内容。

标签： css animation css-animations

【解决方案1】：

尝试将不同id名称的效果放在div中。

body {
  background-color: #777;
}

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

#logo {
    font-size: 80px;
    transition: 0.3s;
    animation: popout 1s ease;
}

#logoh:hover {
    filter: invert(1);
    animation-name: pulse_logo;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

<div id="logo">
  <p id="logoh">Text
    <p>
</div>

【讨论】：

【解决方案2】：

我认为，你能做的最好的事情就是将第二个动画应用于内部元素，例如跨度，如下所示：

body {
  background-color: #777;
  font-size: 4rem;
}
@keyframes pulse_logo {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes popout {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

#logo {
  animation: popout 1s ease;
  transition: all .5s;
}

#logo span:hover {
  filter: invert(1);
  animation: pulse_logo 500ms ease infinite;
}

&lt;p id="logo"&gt;&lt;span&gt;Text&lt;/span&gt;&lt;p&gt;

【讨论】：

【解决方案3】：

保留两个动画，只调整animation-play-state

body {
  background-color: #777;
}


#logo {
    font-size: 80px;
    transition: 0.3s;
    animation: 
      popout 1s ease,
      pulse_logo 4s infinite paused;
}

#logo:hover {
    filter: invert(1);
    animation-play-state:running;
}

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

&lt;p id="logo"&gt;Text&lt;p&gt;

或者只改变你需要的那个：

body {
  background-color: #777;
}

#logo {
    font-size: 80px;
    transition: 0.3s;
    animation: 
      popout 1s ease,
      random_name 4s infinite; /* a random name here that you change on hover */
}

#logo:hover {
    filter: invert(1);
    animation: 
      popout 1s ease,
      pulse_logo 4s infinite;
}

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

&lt;p id="logo"&gt;Text&lt;p&gt;

【讨论】：

第二个动画被破坏了，因为这个必须重新启动，但是当我将鼠标从徽标上移开时它会暂停，当我将鼠标悬停在徽标上时会继续。
@volkovik 这就是我提供两种方法的原因。一个会重新开始动画，另一个会暂停并继续，随意使用你想要的