WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

CSS3アニメーション・transition

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。

CSS3におけるトランジション(transition)とアニメーション(animation)の違い

「transition」

  • 動かすために:hoverなどのきっかけが必要
  • トランジションでは実行後に元のプロパティ値に戻る
  • 比較的簡単な記述で動かす事が可能

「animation」

  • transitionより細かい設定が可能
  • 記述が複雑
  • 「@keyframes」の記述が必要
「transition」を使ったホバーアクション

今回は「transition」を使い、ホバーアクションを設定します。


transitionでは4つのプロパティを指定出来ます。
transition-duration トランジションデュレーション 変化が始まって終わるまでの時間を指定します。
transition-property トランジション・プロパティ 変化が適用されるCSSのプロパティを指定します。
transition-timing-function トランジション・タイミング・ファンクション 変化の度合いを指定します。
transition-delay トランジション・ディレイ 変化が始まる時間を指定します。


transition-timing-function

アニメーションのタイミングや進め方を指定します。
ease(初期値)
ease-in
ease-out
ease-in-out
linear


weboook.blog22.fc2.com








cssanimation.rocks






www.nxworld.net


photoshopvip.net