[transition、transform]CSSアニメーションの使い方[前編]

今回は、CSSアニメーション[前編]ということで『transition、transform』の使い方を解説していきます。

CSSアニメーション[後編]では、『@keyframes、animation』の使い方を解説したいと思います。

CSSアニメーションの使い方[transition]

transitionの使い方

transitionは、プロパティ(widthなど)に対して、どのようにアニメーションさせるかを指定することが出来ます。

例えば、以下のデモのように、ボタンの表示を遅らせたりなどの表示させるまでのアニメーションを指定することが出来ます。

See the Pen WNxpXjL by ryu (@ryu-no-sss) on CodePen.

4つのtransitionプロパティ

以下の4つのtransitionプロパティで、アニメーションを設定しています。

transition-property	アニメーションさせるCSSプロパティ(widthなど)を指定する。
transition-duration	アニメーションが、始まってから終わるまでの時間を指定する。
transition-timing-function	アニメーションが、始まってから終わるまでの中間地点の動きを指定する。
transition-delay	アニメーションが始まるまでの待ち時間を指定する。(アニメーションが開始するまでの時間)

transition-propertyの値

all	全てのCSSプロパティをアニメーションさせる
none	全てのCSSプロパティをアニメーションさせない
widthなど個別でプロパティを指定	指定したプロパティのみアニメーションさせる

使用例

//全てのプロパティをアニメーションするように指定している。
transition-property: all;

transition-durationの値

ms	ミリ秒単位で時間を指定
s	秒単位で時間を指定

See the Pen OJXpQbb by ryu (@ryu-no-sss) on CodePen.

使用例

//1秒かけてアニメーションするように指定している。
transition-duration: 1s;

transition-timing-functionの値

transition-timing-functionの各値のアニメーションは、以下のデモをご覧ください。

ease

ease-in

ease-out

ease-in-out

linear

step-start

step-end

See the Pen BazWJRB by ryu (@ryu-no-sss) on CodePen.

使用例

//アニメーションの中間地点の動きを指定している
transition-timing-function: ease;

transition-delayの値

ms	ミリ秒単位で時間を指定
s	秒単位で時間を指定

See the Pen BazWJry by ryu (@ryu-no-sss) on CodePen.

使用例

//200ミリ秒後にアニメーションをスタートするように指定している。
transition-delay: 200ms;

4つのtransitionプロパティを1つにまとめる方法

今までに、紹介した4つのtransitionプロパティは、『transition:all 1s ease 0.5s;』のように、1つにまとめることが出来ます。

See the Pen OJXpzdy by ryu (@ryu-no-sss) on CodePen.

transitionの値の順番

CSSアニメーションの使い方[transform]

transform+perspectiveの使い方

transformは、画像などの要素を、変形・移動・拡大縮小・回転・傾斜させるために使うプロパティです。

また、要素の奥行きの深さを指定するperspectiveも紹介したいと思います。

主なtransformの値

[matrix]　要素を変形させる値

matrix

matrix3d

使用例

See the Pen eYzvqXe by ryu (@ryu-no-sss) on CodePen.

matrixの値の順番 transform: matrix(1, 0.1, 0.4, 1, 20, 50); 1つ目の値　➡️　水平方向の拡大・縮小値 2つ目の値　➡️　垂直方向の傾斜の値 3つ目の値　➡️　水平方向の傾斜の値 4つ目の値　➡️　垂直方向の拡大・縮小値 5つ目の値　➡️　水平方向の移動距離の値 6つ目の値　➡️　垂直方向の移動距離の値

matrix3dの値の順番 transform:matrix3d ( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ); 1行目 1つ目の値:　水平方向の拡大・縮小値 2つ目の値:　傾斜の値 2行目 1つ目の値:　傾斜の値 2つ目の値:　垂直方向の拡大・縮小値 3行目 3つ目の値:　奥行きの拡大・縮小値 4行目 1つ目の値:　水平方向の移動距離を指定 2つ目の値:　垂直方向の移動距離を指定 3つ目の値:　奥行きの移動距離を指定

[translate]　要素を移動させる値

translate	水平方向と垂直方向の移動距離を指定
translateX	水平方向の移動距離を指定
translateY	垂直方向の移動距離を指定
translateZ	奥行きの距離を指定
translate3d	水平方向・垂直方向・奥行きをまとめて指定

使用例

See the Pen jOrmONp by ryu (@ryu-no-sss) on CodePen.

translateの数値について 数値は、pxで指定します。 ※複数の数値を設定する値の順番 translate(水平方向の値,垂直方向の値) translate3d(水平方向の値、垂直方向の値、奥行きの値)

[scale]　要素を拡大・縮小させる値

scale	水平方向と垂直向の拡大・縮小率を指定
scaleX	水平方向の拡大・縮小率を指定
scaleY	垂直方向の拡大・縮小率を指定
scaleZ	奥行きの拡大・縮小率を指定
scale3d	水平方向・垂直方向・奥行きをまとめて指定

使用例

See the Pen zYBwYpv by ryu (@ryu-no-sss) on CodePen.

scaleの数値について 数値　➡️　1を基準に、1より小さい値(0〜0.9)は、要素が縮小し、1より大きい値は、要素が拡大します。 ※複数の数値を設定する値の順番 scale(水平方向の値,垂直方向の値) scale3d(水平方向の値、垂直方向の値、奥行きの値)

[rotate]　要素を回転させる値

rotate	角度によって要素を回転
rotateX	X軸(水平方向)を軸にして回転
rotateY	Y軸(垂直方向)を軸にして回転
rotateZ	Z軸(奥行き)を軸にして回転
rotate3d	X・ Y・ Z方向のベクトルを決め、回転角度を指定し、3D回転する。

使用例

See the Pen zYBwYJq by ryu (@ryu-no-sss) on CodePen.

rotateの数値について 数値　➡️　〜degを使い、回転率を指定 ※複数の数値を設定する値の順番 scale3d(X方向の値、Y方向の値、Z方向の値、回転角度(deg)を指定)

[skew]　要素に傾斜をつける値

skew	水平方向と垂直方向の傾斜角度を指定
skewX	水平方向の傾斜角度を指定
skewY	垂直方向の傾斜角度を指定

使用例

See the Pen zYBwYbK by ryu (@ryu-no-sss) on CodePen.

skewの数値について 数値　➡️　〜degを使い、傾斜率を指定 ※複数の数値を設定する値の順番 skew(X方向の値、Y方向の値)

[perspective]　要素に奥行きの深さを指定する値

perspective

要素に奥行きの深さを指定

使用例

See the Pen pobPvKN by ryu (@ryu-no-sss) on CodePen.

perspectiveの数値について 数値　➡️　pxやemなどで指定

transitionとtransformを組み合わせたアニメーション例

ボタンを回転させるアニメーション

See the Pen OJXjwLN by ryu (@ryu-no-sss) on CodePen.

1、『.btn』クラスのtransition-propertyで、background-colorとtransformをアニメーションさせるように指定 2、『.btn:hover』クラスで、マウスホバー後の動きを指定

ボタンを拡大させるアニメーション

See the Pen gOMxqyb by ryu (@ryu-no-sss) on CodePen.

1、『.btn』クラスのtransition-propertyで、background-colorとtransformをアニメーションさせるように指定 2、『.btn:hover』クラスで、マウスホバー後の動きを指定

ボタンをスライド移動させるアニメーション

See the Pen ExyvzQo by ryu (@ryu-no-sss) on CodePen.

1、『.btn』クラスのtransition-propertyで、transformをアニメーションさせるように指定 2、『.btn:hover』クラスで、マウスホバー後の動きを指定

複数のtransformを使ったアニメーション

See the Pen zYBEOoz by ryu (@ryu-no-sss) on CodePen.

1、『.btn』クラスのtransition-propertyで、background-colorとtransformをアニメーションさせるように指定 2、『.btn:hover』クラスで、マウスホバー後の動きを指定 重要 transformを複数選択する場合は、値と値の間に半角スペースをいれる

まとめ

transition　➡️　プロパティ(widthなど)に対して、どのようにアニメーションさせるかを指定する。 transform　➡️　画像などの要素を、変形・移動・拡大縮小・回転・傾斜させる指定をする。

CSSアニメーションの使い方[後編]では、『@keyframes、animation』の使い方の解説をしていますので、気になる方は以下のリンクからぜひ！

[@keyframes、animation]CSSアニメーションの使い方[後編]

それでは、最後まで読んでいただきありがとうございました。