IEではメディアクエリ内にkeyframeを書くと動作しない:メモ

英語の情報ではバグというのも見かけましたが、バグといっていいのかわからないため、とりあえず状況だけ。

IEではメディアクエリ内にkeyframeを書くと動作しない

タイトルのとおりですが、IEではメディアクエリ内にkeyframeを書くと動作しません。

アニメーションの指定自体はもちろんメディアクエリの中でよいですが、keyframeの記述は外に出す必要があります。

調べた範囲では、毎度のIE(IE10/IE11)のみの模様です。

参考

最初に以下のページで情報を発見。

IE10 – CSS animation not working

上記のやり取りの中で以下の記述がありました。

media queries can block IE from seeing keyframe animations too.

そこでもう少し調べて以下のページを発見。こちらにはbugと書かれていました。

IE bug: keyframe animations inside a media query block

一応探した日本語サイトでは以下の記事がありました。
keyframesアニメーションをメディアクエリの中に書くとIEで動かない

2015年の記事ですが、この時点で日本語の情報はなかった模様です。

結び

今までメディアクエリの中に意図してkeyframeを書いたことがなかったため初見の問題でした。

-msベンダープレフィックス

今回の調査で知りましたが、IE10とIE11ではanimationに-msのベンダープレフィックスが無くても良いのですね。

これまた気付きませんでした…。