Currently, I have a basic label featuring a contact number with a blinking animation. However, the animation is only a simple color transition at this time (see code below).
I have managed to successfully pause the animation and revert the text back to its default color. Yet, when hovering over the text, while the animation does pause, it fails to change to the desired color.
.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>Can you please advise on where I may be going wrong?
Your insight would be greatly appreciated.
You can view the code example here