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