Можно ли анимировать -webkit-text-fill-color?

Question

Я пытаюсь оживить какой-нибудь текст

h1 { 
 
    font-family: sans-serif; 
 
\t color: black; 
 
\t animation: danger-zone 3s linear infinite; 
 
\t animation-direction: alternate; 
 
    font-size:60px; 
 
    
 
\t -webkit-text-stroke-width: 2px; 
 
} 
 

 
@keyframes danger-zone { 
 
\t 0% { 
 

 
\t \t -webkit-text-fill-color: black; 
 
\t \t -webkit-text-stroke-color: black; 
 
\t } 
 

 
\t 100% { 
 
\t \t 
 
\t \t -webkit-text-fill-color: white; 
 
\t \t -webkit-text-stroke-color: white; 
 
\t } 
 
}

<h1>Here's a title!</h1>

По какой-то причине, только инсульт, кажется, анимировать, и цвет заливки просто переключается на (я предполагаю, что) 50%. Можно ли анимировать цвет заливки только в CSS?

EDIT: Он работает в Firefox, а не в Chrome. Собираюсь проверить некоторые другие браузеры в настоящее время

Answer 1

кажется, что хром не любит -color, суффикс, попробуйте следующее:

h1 { 
 
    font-family: sans-serif; 
 
    color: black; 
 
    animation: danger-zone 3s linear infinite; 
 
    animation-direction: alternate; 
 
    font-size: 60px; 
 
    -webkit-text-stroke-width: 2px; 
 
} 
 
@keyframes danger-zone { 
 
    0% { 
 
    color: black; 
 
    -webkit-text-stroke: 2px black; 
 
    } 
 
    100% { 
 
    color: white; 
 
    -webkit-text-stroke: 2px white; 
 
    } 
 
}

<h1>Here's a title!</h1>