Webkit顏色轉換循環文本在Firefox中不起作用

Question

我希望我的H3標籤在無限循環中改變顏色。我的代碼在Safari中工作正常，但Firefox不會使標籤更改顏色？

這裏是我的代碼：

h3 {color: #333 !important;} 
@-webkit-keyframes colours { 
     0% {color: #333;} 
    15% {color: #8bc5d1;} 
    30% {color: #f8cb4a;} 
    45% {color: #95b850;} 
    60% {color: #944893;} 
    75% {color: #c71f00;} 
    90% {color: #bdb280;} 
    100% {color: #333;} 
} 
h3 { 
    -webkit-animation-direction: normal; 
    -webkit-animation-duration: 60s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: colours; 
    -webkit-animation-timing-function: ease; 
} 

Answer 1

您使用的是-webkit前綴，這將只在WebKit的瀏覽器中啓用工作。您可以添加未加前綴的版本以支持支持語法的現代瀏覽器，並且還可以爲所有瀏覽器添加前綴版本。

h3 { 
 
    color: #333; 
 
} 
 

 

 
@-webkit-keyframes colours { 
 
    0% { 
 
    color: #333; 
 
    } 
 
    15% { 
 
    color: #8bc5d1; 
 
    } 
 
    30% { 
 
    color: #f8cb4a; 
 
    } 
 
    45% { 
 
    color: #95b850; 
 
    } 
 
    60% { 
 
    color: #944893; 
 
    } 
 
    75% { 
 
    color: #c71f00; 
 
    } 
 
    90% { 
 
    color: #bdb280; 
 
    } 
 
    100% { 
 
    color: #333; 
 
    } 
 
} 
 

 

 
@keyframes colours { 
 
    0% { 
 
    color: #333; 
 
    } 
 
    15% { 
 
    color: #8bc5d1; 
 
    } 
 
    30% { 
 
    color: #f8cb4a; 
 
    } 
 
    45% { 
 
    color: #95b850; 
 
    } 
 
    60% { 
 
    color: #944893; 
 
    } 
 
    75% { 
 
    color: #c71f00; 
 
    } 
 
    90% { 
 
    color: #bdb280; 
 
    } 
 
    100% { 
 
    color: #333; 
 
    } 
 
} 
 

 
h3 { 
 
    -webkit-animation-direction: normal; 
 
      animation-direction: normal; 
 
    -webkit-animation-duration: 60s; 
 
      animation-duration: 60s; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
    -webkit-animation-name: colours; 
 
      animation-name: colours; 
 
    -webkit-animation-timing-function: ease; 
 
      animation-timing-function: ease; 
 
}

<h3>foo</h3>