webページ作成で CSSアニメーションを具体的に使えないか試す

投稿日:2014年4月18日

CSS の animation や transition を使えるようになって久しいですが、実際の使いどころはいまいちな印象です。原因の大部分は IE にあるとおもいますけど。

そこで animation に対応しているまともなブラウザさんにはおもてなしを、
そして対応していない困ったブラウザにはアニメーションはしなくとも表示はできるようにする。
といったところを目処に animation を試してみました。

デモ

※見づらい場合はページを表示いただけます
CSS アニメーション サンプルページ

javascript ではクラスの付け替えのみを行い、そのクラスには display: blockanimation を指定しました。

結果、Firefox さんや Chrome さんでは期待どおりに表示されました。IE では IE9 以前では当然のようにアニメーションはしませんが、それだけでなく IE10 と IE11 でも一部うまくいきませんでした。具体的には switch4 で、これはおそらく transform-function を複数指定しているためのようです。

ただ IE でもコンテンツの表示はできているので、方針次第では使用してみるのもありでしょうか。

HTML

CSS

JavaScript

(藤崎)

関連記事

  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル