-webkit-text-fill-colorをアニメートすることはできますか？

Question

私はいくつかのテキストのみのストロークがアニメーションするように表示され、塗りつぶしの色はわずか50％に（私は推測している）でスイッチング何らかの理由で

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>

をアニメーション化しようとしています。 CSSで塗りつぶしの色をアニメーション化することは可能ですか？

EDIT：Firefoxでは動作していますが、Chromeでは動作していないようです。今

Answer 1

それは - 色の接尾辞のようなものクロームdoesntのようだゴナテストいくつかの他のブラウザでは、この方法を試してください。

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>