4_1 CSS Transitionsの特徴

CSS Transitionsは、初めの状態と終わりの状態の間で、時間経過とともにCSSプロパティの値を変更することで、アニメーションを実現する方法です。

CSS Animationsとの大きな違いは、

  • キーフレームがない
  • アニメーションを開始する”きっかけ”が必要

ということにあります。

CSS Transitionsの特徴

  1. 初めと終わりの状態がある
  2. ブラウザは、ブラウザが監視するCSSプロパティの値に変化があったときにアニメーションを再生する
  3. 初めと終わりの間の状態はブラウザが自動的に補間する
  4. ブラウザネイティブな機能なので、動作が滑らか
  5. アニメーションは自動的にスタートしない。何らかのきっかけが必要
  6. アニメーションは途中でやめることができる。その場合、アニメーションは、初めの状態にアニメーションしながら戻る
  7. 何度でも実行できる

CSS TransitionsはCSS Animationsと混同されがちですが、登録されたCSSプロパティの値が、何らかのきっかけで変化したときにアニメーションが再生されるものだと、覚えておけばよいでしょう。また、途中でやめた場合でも、CSS Transitionsのアニメーションは、アニメーションしながら初めの状態に戻る、ということも、アニメーション表現にとっては大きな武器になり得ます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA