BLOG

24年新卒 WEBデザイナー募集中 中途 WEBデザイナー募集中 24年新卒 WEBエンジニア募集中

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

更新日:2022/05/18

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

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

デモ

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

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

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

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

HTML

CSS

JavaScript

(藤崎)

FOLLOW US