cssのtransitionとjQueryのanimate

css3で使えるtransitionによるアニメーション効果。非常にリッチな動きを表現することができるが、残念なことにIE9以下では動かすことができない。

従って、広い層に見てもらうためにはあまり実用的でない。そうした古いブラウザでも対応してもらうためにはjQueryのanimateを使うのがよい。改めて、jQueryは優秀。ブラウザごとの違いを一意に吸収してくれる。

ちなみに、jQueryが読めるようになるとJSプログラマとして一人前というのを聞いたことがある。しかし、IE6に関してはさすがのjQueryも1.9までしか対応していない。

その他メモ

・cssのtransiton関係は1行に書かないとうまく動かない。CSSとは「Cascading Style Sheets」の略であり、次に書かれたものをどんどん上書きしてってしまうから。

compassの場合の例 ) transform( transition(30.0, 60.0) rotate(40) );

・Chromeのデベロッパーツールでスマホ向けレンダリングをシュミレートすることができる。