Как остановить текущую анимацию и изменить стили при наведении

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>

Что я делаю не так?

Пожалуйста, дайте мне некоторое представление.

Вот ручка

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>

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