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>