FirefoxでCSS animationが動かなかいバグ？
2014年6月号の『Web Designing』にCSSのanimationを使ったエフェクトを特集していたので、実際にコードを書いて勉強していました。すると、Firefoxだけでanimationが動きませんでした。
サンプルファイルをそのまま開いても動かないので、どうしたものかと悩みました。とりあえず、単純なコードに書き換えて検証してみましたが、動きません・・・。その時のコードは下記の通り。
HTML
[html]
<h1>StudioDansyaku</h1>
[/html]
CSS
[css]
h1 {
font-size: 20px;
padding: 10px;
background: red;
animation: colorchange 5 ease 0 infinite normal;
-webkit-animation: colorchange 5s ease 0 infinite normal;
}
@keyframes colorchange {
0% { background-color: red; color: black; }
50% { background-color: blue; color: white; }
}
@-webkit-keyframes colorchange {
0% { background-color: red; color: black; }
50% { background-color: blue; color: white; }
}
[/css]
IE11でも動きますし、webkit系もベンダープレフィックスをつけることで動きました。Firefoxでもベンダープレフィックスを付けてみましたが動きませんでした。
Googleで探してみたところanimation-nameの値に「”（ダブルクォーテーション）」や「’（シングルクォーテーション）」を付けないと動くという記事もありましたが、これでもダメでした。迷う中で見つけたのが「css animationがfirefoxで動かない｜このコードわからん」でした。
どうやらanimateion-durationの値に「0」と指定すると動かないようです。こちらを「0s」と訂正することで正常に動くようになりました。もしかするとブラウザがanimation-delayとanimation-iteration-countの区別が出来ていないのかもしれませんね。
FireFox向けのベンダープレフィックスは付けなくても動きます。簡単なことかもしれませんが、念のため備忘録として残しておきました。無事に解決して何より。