Animation Blink not working properly on Chrome

Question

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;
   }
}

Answer 1

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.

For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke.

To get around this you can animate the opacity of the link instead.

a {
  animation: blink 500ms infinite alternate;
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}

<a href="#">hello world</a>

---

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.

Answer 2

remove the -webkit- and -ms- prefixes from the color property

@-webkit-keyframes blink {
   from {
      color: white;
   }
   to {
      color: red;
   }
}
 @-ms-keyframes blink {
   from {
      color: white;
   }
   to {
      color: red;
   }
}

to check if prefixes are needed check caniuse.com