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

Question

所以我有一个简单的标签，上面有一个正在闪烁的动画的联系电话。 (下面的代码)这是一个简单的颜色转换。

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

.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

Answer 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>