2年ぶりに船釣りへ行ってきました。そこで隣にいた知人がタチウオを表層でバラす瞬間を目の当たりにしました。グダっと海面に寝そべり、「あー、もうあかんわ」と諦めの表情を見せていたタチウオでしたが、土壇場でフックが外れると、戸惑いながらも海底へと帰っていきました。あの時タチウオが一瞬見せた「エッ？ 釣らへんの？ 帰っていいの？」という嬉しさと困惑の入り混じった表情は、人間のそれとよく似ていて、とても愛らしく、ますます釣りが好きになりました。

さてさて、先日コーディングをしていたときに遭遇したトラブルの話です。

同じ要素に2つ以上のanimationを設定すると、IE10 / IE11では1つだけしか効かないことがある

ある要素にCSS3のanimationプロパティで複数のアニメーションを設定したら、IEだけどうにもこうにもうまく動かない事態が発生し、とてもやきもきしました。

具体的には、以下のように一つの要素“p”に対して2つの異なるアニメーション“anim-a”と“anim-b”を設定したとき、Chrome、Safari、FireFox、Edgeでは問題なく動くのに、IE10とIE11だけは“anim-a”のアニメーションしか動かないという現象（バグ？）が発生しました。

p {
	animation: anim-a 3s linear infinite, anim-b 3s linear infinite;
}
@keyframes anim-a {
	/* アニメーションのキーフレームを定義 */
}
@keyframes anim-b {
	/* アニメーションのキーフレームを定義 */
}

※ベンダープレフィックスは省略

やったこと1：jQueryを1系から2系に変更する

海外のコミュニティサイトを参考に@keyframesの位置を変えたり、思い当たる限りCSSを書き直してみましたが、どうも意図した通りに動かないので、発想を変えてJavaScript周りを見直すことに。

そして、jQueryを1系→2系に変更してみたところ、見事“anim-a”と“anim-b”のアニメーションのルーティンが動きだしました。が、何度かリロードしてみると、ときどき動かなかったりと、なんとも不安定で非常におしい結果になりました。

やったこと2：bodyタグの最後に読み込んでいた外部JSファイルをheadタグ内に変更する

HTMLやCSSのレンダリングを優先させるため、外部JSファイルの読み込みのためのscriptタグをbodyの閉じタグの直前に書くサイトが増え、僕もここ最近はそれに従っていましたが、今回に限ってはそれがダメだったようです。いや、もしかしたら僕が外部ファイルに書いたjQueryがまずかったのかもしれません。

とにかく、scriptタグを従来のようにhead内に移動すると“anim-a”と“anim-b”のアニメーションがばっちり動くようになりました。

まとめ

原因がはっきりしないので無事解決とは言えませんが、IE10/11においてCSS3のアニメーションがちゃんと動かないときは、jQuery周りを見直したら幸せになれるかもしれません。