transitionとは
CSSでアニメーションさせる時によくつかう「transition」プロパティの使い方について説明します。「transition」プロパティは一言でいうと、時間経過による変化を表現するCSSのプロパティとなります。
ちなみに「transition」プロパティを使ってのループ処理はできません。ループさせるには「animation」プロパティを使用してください。
基本形
transition : 変化の対象 変化の開始から終了までの時間 変化の仕方;
(例) transition : all 1.5s ease;
上記が、transitionの基本形となります。
See the Pen transition-css-sample01 by muko (@mkpn) on CodePen.
マウスオーバーすると、全てのプロパティが1.5秒かけて「ease」で変化する。
transitionの4つのプロパティ
transitionは以下の4つのプロパティを設定することができます。
① transition-duration
変化開始から終了までの時間。
See the Pen transition-css-sample02 by muko (@mkpn) on CodePen.
マウスオーバーすると、3秒かけて横幅を100pxから300pxへ変化する。
② transition-property
変化させるCSSのプロパティを指定。
See the Pen transition-css-sample03 by muko (@mkpn) on CodePen.
マウスオーバーすると、3秒かけて背景色が【#1383ca】から【#ca137f】へ変化する。
③ transition-timing-function
変化の仕方を指定。以下の変化方法を指定することができます。
| ease | 開始から終了まで滑らかにする(初期値) |
| linear | 開始から終了まで一定の速度 |
| ease-in | ゆっくり始まって徐々に速度が上がり終わる |
| ease-out | 徐々に減速していき、ゆっくり終わる |
| cubic-bezier | cubic-bezier（x1,x2,x3）。ベジェ曲線のように任意で速度の変化を指定。cubic-bezier.comを使うと直観的に数値を生成できます。 |
See the Pen transition-css-sample04 by muko (@mkpn) on CodePen.
マウスオーバーすると、2秒かけて横幅を100pxから300pxへ「ease-in-out」で変化する。
④ transition-delay
変化が開始するまでの時間。
See the Pen transition-css-sample05 by muko (@mkpn) on CodePen.
マウスオーバーすると、0.5秒後に2秒かけて横幅を100pxから300pxへ「ease-in-out」で変化する。
ショートハンド
前述した4つのプロパティをひとまとめにして記述する。
セレクタ名 {
①transition-propertyの値
②transition-durationの値
③transition-timing-functionの値
④transition-delayの値
}
See the Pen transition-css-sample06 by muko (@mkpn) on CodePen.
マウスオーバーすると、1秒後に横幅が2.5秒かけて「ease」の動きで300pxになる。
2つのプロパティを適用
transitionは、複数のプロパティによる変化を、コンマで区切りで指定します。
See the Pen transition-css-sample07 by muko (@mkpn) on CodePen.
マウスオーバーすると、1秒後に2.5秒かけて横幅を100pxから300pxへ「ease」で変化する。
マウスオーバーすると、2秒後に1.5秒かけて「ease-out」の動きで左に移動する。
transitionとtransformを一緒に使う
transitionはtransformと一緒によく使われます。
transitionとtransformは混同してしまいがちですが、『transitionは変化の遷移（時間）』で『transformは変形（形）』とイメージしましょう。
See the Pen transition-css-sample08 by muko (@mkpn) on CodePen.
マウスオーバーすると、1秒後に横幅が2秒かけて「ease」の動きで300pxになる。(transition)
マウスオーバーすると、0.5秒後に1.5秒かけて「ease-out」の動きで、180度回転する。(transform)
transitionプロパティとanimationプロパティの違い
transitionプロパティはマウスオーバー（hover）や、javascriptなどを使い「class」や「id」を付与するなどをトリガーとしてアニメーションが発動します。
一方、animationプロパティはアニメーションのループ、自動再生や、再生回数の指定など、再生方法について細かい設定が可能です。
transitionプロパティはループ再生などができないので、ループ再生させる場合は、animationプロパティを使用します。
≫ 【CSSアニメーション】animationプロパティの使い方【サンプルあり】
≫ 画像が重なりながら、横からスライドしてきて表示【Image SlideIn Effect】
