【CSS/jQueryアニメーションの基本原理】
CSSやJavaScript(jQuery含む)のセレクタを使って
HTMLタグにスタイルシートを設定すると、
ブラウザの表示に変化が起こりますね。
その変化を、最初から発生させるのではなくて、
ユーザーの操作やページの表示状態が変わった
タイミングで発生させるのが原理です。
直接style属性を変化させても、
class属性を変化させても同じことです。
根本は、スタイルシートの設定の変更です。
そこに「時間差」を追加すると、アニメーションが
滑らかになります。
CSSなら transitionプロパティで指定し、
jQueryなら animation() 関数で指定しますが、
どちらも内部的にはブラウザにタイマーのような
仕掛けを予約して、一定の時間をかけて緩やかに
スタイルシートの設定値を開始値から終了値へと
変化させることによってアニメーションします。
この原理を頭の隅に入れておけば、
広い応用力が備わります。
