Анимация Мигает не работает должным образом на Chrome

Question

Я добавил мигающую анимацию к одному из элементов из моего меню. Он отлично работает в Mozilla, но в Chrome он останавливается после нажатия, и помогает только очистка данных браузера. Иногда даже это не решает.

Вы можете помочь? Это тоже не работает на IE, но это не так важно.

.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

удалить -webkit- и -ms- префиксы от цвета собственности

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

, чтобы проверить, нужны ли префиксы Регулярно проверяйте caniuse.com

Answer 2

Ссылка перестает мигать, когда ссылка была нажата потому что применяется стиль браузера по умолчанию :visited, и большинство браузеров ограничивают стиль :visited pseudo-class.

В целях конфиденциальности браузеры строго ограничивают стили, которые вы можете применить , используя элемент, выбранный этим псевдоклассом: только цвет, цвет фона, границы, границы нижнего цвета, border-left-color , border-right-color, border-top-color, контурный цвет, цвет правила столбца, заливка и штрих.

Чтобы обойти это, вы можете анимировать непрозрачность ссылки.

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

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

---

Несколько боковые заметки ...

Мой пример использует short-hand animation property.

Я также удалил префиксы для краткости и потому, что большинство современных браузеров больше не требуют их.

Использовать мигающий текст экономно и с особой осторожностью или не использовать его вообще. Многие пользователи находят это раздражающим. The <blink> tag was depreciated for a good reason.