2014年6月号の『Web Designing』にCSSのanimationを使ったエフェクトを特集していたので、実際にコードを書いて勉強していました。すると、Firefoxだけでanimationが動きませんでした。

サンプルファイルをそのまま開いても動かないので、どうしたものかと悩みました。とりあえず、単純なコードに書き換えて検証してみましたが、動きません・・・。その時のコードは下記の通り。

HTML

<h1>StudioDansyaku</h1>

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; }
}

IE11でも動きますし、webkit系もベンダープレフィックスをつけることで動きました。Firefoxでもベンダープレフィックスを付けてみましたが動きませんでした。

Googleで探してみたところanimation-nameの値に「”(ダブルクォーテーション)」や「’(シングルクォーテーション)」を付けないと動くという記事もありましたが、これでもダメでした。迷う中で見つけたのが「css animationがfirefoxで動かない|このコードわからん」でした。
どうやらanimateion-durationの値に「0」と指定すると動かないようです。こちらを「0s」と訂正することで正常に動くようになりました。もしかするとブラウザがanimation-delayanimation-iteration-countの区別が出来ていないのかもしれませんね。

FireFox向けのベンダープレフィックスは付けなくても動きます。簡単なことかもしれませんが、念のため備忘録として残しておきました。無事に解決して何より。