css

【css】transitionの使い方

2020/08/10

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プロパティの使い方


-css

© 2020 MUKOLOG