I've added a blink animation to one of the elements from my menu-bar. It works perfectly in Mozilla, but in Chrome it stops after being clicked and only clearing the browser data helps. Sometimes even that doesn't solve it.
Can you help? It does not work on IE either, but that is not as important.
.menu-box #menu-item-368 a {
animation-name: blink;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation-name: blink;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-ms-animation-name: blink;
-ms-animation-duration: 500ms;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
}
@keyframes blink {
from {
color: white;
}
to {
color: red;
}
}
@-webkit-keyframes blink {
from {
-webkit-color: white;
}
to {
-webkit-color: red;
}
}
@-ms-keyframes blink {
from {
-ms-color: white;
}
to {
-ms-color: red;
}
}
The link stops blinking when the link has been clicked because the browser's default
:visited
style is being applied and most browsers limit styling of the :visited pseudo-class.To get around this you can animate the opacity of the link instead.
A few side notes...
My example makes use of the short-hand animation property.
I also removed the prefixes, for brevity and because most modern browsers no longer require them.
Use blinking text sparingly and with extreme caution or don't use it at all. Many users find it irritating. The
<blink>
tag was depreciated for a good reason.