HTML5 × CSS3 × jQueryのハイブリッドアニメーション
最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。
jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメーションを実装することができてとても便利です。しかし、jQueryによるアニメーションを多用すると処理がどうしても重くなります。
特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、jQueryによるアニメーションがもっさりとした動きになる事が多いです。
jQueryのアニメーションは、通常CPUにより処理されています。CUPはアニメーションだけでなくコンピュータ全体の演算を担っているため、CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。
CSS3の「transformプロパティ」を使用したアニメーションはGPUが処理を行います。GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。
jQueryとCSS3を上手く使うことで、滑らかで負荷のかからないアニメーションを制作しましょう。
使用するjQueryメソッド
addClassメソッド
指定した要素に引数で設定したクラス（class属性）を追加します。引数にはfunctionを指定することも可能で、条件によって追加するクラスを変更するなど高度な処理にも対応できます。
removeClassメソッド
指定した要素から引数に設定したクラス（class属性）を削除します（引数を設定しない場合には全てのクラスを削除します）。引数にはfunctionを指定することも可能で、条件によって削除するクラスを変更するなど高度な処理にも対応できます。
parentメソッド
指定した要素の「親」要素を選択します。親要素とは階層構造（入れ子構造）において直上にある要素のことです。
名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。
siblingsメソッド
指定した要素の兄弟要素（同じ階層の要素）を選択します。引数を設定しない場合はすべての兄弟要素を選択します。
toggleClassメソッド
指定したCSSクラスが要素に無ければ追加し、あれば削除する。
CSS3によるアニメーション
CSS3によるアニメーションは大きく分けて、トランジション（transition）とアニメーション（animation）の２つに別ける事が出来ます。
CSS3におけるトランジション（transition）とアニメーション（animation）の違い
「transition」
- 動かすために:hoverなどのきっかけが必要
- トランジションでは実行後に元のプロパティ値に戻る
- 比較的簡単な記述で動かす事が可能
transitionで指定出来るプロパティ
transition-property
アニメーションしたいプロパティの名前を指定。ここに指定したプロパティだけが、トランジションによりアニメーションします。それ以外のプロパティの変更は即座に反映されます。
transition-duration
トランジションの実行にかける所要時間を指定。
transition-timing-function
トランジションの中間状態における動き方を指定。
簡単に言うと、動き方の変化の指定です。
timing-functionは大きく分けると5種類あり、違いを理解する事で適切な動き方を表現できるようになるので、しっかり覚えましょう。
・linear
一定の速度で変化します。
・ease
最初と最後がゆっくり滑らかに変化します。
・ease-in
ゆっくり始まり、徐々に速くなります。
・ease-out
速く始まり、徐々に遅くなります。
・ease-in-out
動きはeaseと同じく、最初と最後がゆっくり滑らかに変化します。
違いは速度です。ease-in-outの方がよりゆっくり始まりゆっくり終わります。
transition-delay
トランジションの実行が開始されるまでの待ち時間。
