CSSアニメーションがIEで動かない 千葉県の方へ

千葉市稲毛区の歩道橋の画像
千葉市稲毛区の歩道橋の画像
千葉市稲毛区の歩道橋

CSSのアニメーションがIEで動かない千葉県の方!!こんにちは!PC REPAIRです。
あるあるですね。
私もIEで動かずベンダープレフィックスを入れてみたり…..いや、もう関係ないよなぁなんてやってみたり。
あれやこれややってみたのですが、動かないので対応策を考えました。

どうしたかというと、
IEで動かしたい方には申し訳ないのですが、そこはあきらめました。
動いたとしても実は他の環境で動いていなかったり、今後どうなのかなどの考えもあるためです。

要素がアニメーションされずにずっと表示されているのは、サイトの内容が見えなくなる場合も考えられます。
例として、回転してから消えるなどのアニメーションです。
回転することもなく消えることもなく画面に張り付きっぱなしで、スクロールしてもついてくる。
『何だこのサイト。できてないじゃないか』とせっかく訪れて頂いたユーザーの方を見れずに困らせてしまう。
これでは本末転倒ですね。

ただ、CSSのアニメーションをあきらめたわけではありません。

IEなどアニメーションがうまく動作しないブラウザへの対策として、初めは非表示や透過させた状態から開始するようにしています。

.sample_A{
visibility : hidden ;
animation-name : anim_A
}

.sample_B{
color : transparent ;
animation-name : anim_B
}

このように初めは非表示や透過してしまい、
アニメーションさせる時だけ出てくるようにします。

@keyframe anim_A {
0%{ visibility: visible;
opacity: 0}
50%{ visibility: visible;
opacity: 1}
100%{ visibility: visible;
opacity: 0}
}

@keyframe anim_B {
10% {
color: green;
}
20% {
color: blue;
}
30% {
color: darkmagenta;
}
100% {
color: red;
}
}

こうすることで、
アニメーションを読み込まないなら非表示か透過
アニメーションを読み込むなら表示や色付きで開始。

というようにCSSのアニメーションを読み込むのかそうでないのかで切り分けることができるので、IEに限らずアニメーションを読み込まないなら表示されないようにしています。

モバイルまで考えるとブラウザって多数ありますからね。
Samsung Internet Browserなどなど。

ですので中途半端に表示されて動かない!!とならないように、読み込むのか読み込まないのかで表示・非表示とはっきり切り分けています。

参考になるかわかりませんが、このようにしています( `・∀・´)