transitionの覚書

transitionでアニメーションを

transitionはjQueryなどを使用せずCSS3のみで簡単なアニメーションを施す機能である。

transitionのプロパティ

transitionのプロパティの記述方法は

transition:transition-property␣transition-duration␣transition-timing-function␣transition-delay;

• transition-property
  • どの要素を変化させたいかを指定します(background-colorなど)。

• transition-duration
  • transition の変化をどれくらいの時間で変化するかを設定します。単位は "s" 。

• transition-timing-function
  • 上記の変化時間帯を元に、変化速度の緩急や進行割合を詳しく設定します。その際に三次ベジェ曲線というグラフを元に変化速度、割合を決めるコントロールポイントの数値を設定するなど細か決まりがありますが、大まかな設定は以下のプロパティ値でまかなえます。
    • ease...開始から終了まで滑らかに加速→等速→減速していく
    • linear...一定速度
    • ease-in...開始がゆっくり
    • ease-out...終了がゆっくり
    • ease-in-out...開始と終了がゆっくり
    • cubic-bezier...三次ベジェ曲線コントロールポイント4点を数値設定できる。

• transition-delay
  • 変化がいつ始まるかを表す。デフォルトは０で、ホバーすると色が変わる疑似要素と同じ変化。時間をおいて変化を設定する場合、transition-durationと同じように単位を"s"をつけて設定。