悬停时如何停止当前正在运行的动画并更改样式

Posted 2023-03-06

【中文标题】悬停时如何停止当前正在运行的动画并更改样式

【英文标题】：How to stop the currently running animation and change styles when hovered

【发布时间】：2020-01-22 07:05:06

【问题描述】：

所以我有一个简单的标签，上面有一个联系号码，上面有一个闪烁的动画。 （下面的代码）这是一个简单的颜色过渡。

我还需要暂停动画（完成）并将默认颜色应用于文本。悬停时，动画显然会以随机颜色暂停，但不会更改为我想要的颜色。

.contact .message 
  color: inherit;
  font-size: inherit;
  display: inline;
  animation: blink 2s infinite;


.contact .message:hover 
  color: #151111;
  /* This doesn't get applied */
  animation-play-state: paused;



/* Blinking animation */

@keyframes blink 
  0% 
    color: #0590b2;
  
  50% 
    color: #151111;
  
  100% 
    color: #0590b2;
  

<div class="contact">
  <a href="tel:1234">
    <span class="message">Contact us: <strong>+1234</strong></span>
  </a>
</div>

我做错了什么？

请给我一些见解。

这里是pen

【参考方案1】：

如果您需要比 CSS 变量更好的支持，这里还有一个技巧。只需在父级上定义动画并更改子级的颜色：

.contact a 
  animation: blink 1s infinite alternate;


.contact .message:hover 
  color:red;


/* Blinking animation */
@keyframes blink 
  0% 
    color: #0590b2;
  
  100% 
    color: #151111;
  

<div class="contact" >
    <a href="tel:1234">
        <span class="message">Contact us: <strong>+1234</strong></span>
    </a>
</div>

【讨论】：

太棒了。多谢兄弟。这很简洁。我注意到您甚至不需要暂停我在原始代码中所做的动画。看起来悬停事件优先于动画吧？

@Desper 这是因为动画和悬停不在同一个元素上。默认情况下，孩子继承动画的颜色，在悬停时我会改变它的颜色。动画仍然在父级上运行，但我们什么也看不到。

【参考方案2】：

我使用了 CSS 变量。

var(--value, fallback);

回退将是有效的，因为最初没有定义“值”。悬停完成后，回退无效，因为定义了“值”。

.contact .message 
  color: var(--color, inherit);
  font-size: inherit;
  display: inline;
  animation: blink 2s infinite;


.contact .message:hover 
  --color: red;
  animation-play-state: paused;


/* Blinking animation */
@keyframes blink 
  0% 
    color: var(--color, #0590b2);
  
  50% 
    color: var(--color, #151111);
  
  100% 
    color: var(--color, #0590b2);
  

<div class="contact" >
    <a href="tel:1234">
        <span class="message">Contact us: <strong>+1234</strong></span>
    </a>
</div>

【讨论】：

简直太棒了，非常感谢兄弟的快速回复。从来没有考虑过使用变量，更不用说回退值了。非常感激。 :)