CSSアニメーション 〜transform編〜

こんにちは。01wave冨永です。

前回の「transition編」に続き、今回は要素を移動させたり、回転させたりなど変形のプロパティである「transform編」について書いています。

▼「transition編」についてはこちらをご覧ください。

 transformについて

transformとは直訳すると「変形」と言う意味です。
CSS3から追加され、要素に対して変形を加えることができるプロパティになります。
変形には「移動」「回転」「伸縮」「傾斜」があり、順番に説明していきます。

transformには2DXY方向)と3DXYZ方向)の指定ができますが、今回は2Dのみについて解説していきます。

移動 transform:translate(0px);

要素の移動を指定するプロパティです。
「 transform:translate(数値); 」と記述し、値は「px」や「%」で指定します。

移動する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

See the Pen gQdQjZ by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

回転 transform:rotate(0deg);

要素の回転を指定するプロパティです。
transform:rotate(数値);」と記述し、値は角度を表す「deg」で指定します。(90deg=90度)

正数は時計回り、負数は反時計回りに回転します。
また、X軸方向、Y軸方向への回転もあります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

See the Pen aQaQRy by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

伸縮 transform:scale(0);

要素の伸縮を指定するプロパティです。
transform:scale(数値);」と記述し、値は「数値のみ」で指定します。
1を基準に伸縮する比率を指定できます。

伸縮する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

See the Pen QJVJJw by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

傾斜 transform: skew(0deg);

要素の傾斜を指定するプロパティです。
transform: skew(数値);」と記述し、値は角度を表す「deg」で指定します。(90deg=90度)

傾斜する方向としてはX軸方向、Y軸方向、XY軸方向があります。
実際にオンマウス(スマホの方はタップ)で動きの違いを見比べてみてください。

See the Pen XyPyyM by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

ショートハンドプロパティ

全てまとめて表示することもできます。
「プロパティ(値)」を半角スペースでつないで記述します。

 まとめ

transform」と「transition」を使い実際にコーディングしてみました!
組み合わせて使うことにより、さらに動きの幅を広げることができました。

オンマウス(スマホの方はタップ)していただけるとさまざまな動きを楽しめます。

See the Pen JeawMm by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0

小さな動きの組み合わせで複雑な動きを表現できるため、基本を押さえておくことが大事だなと改めて感じました。
今後、ボタンやリンクなど用途に合わせてアニメーションを使い、自由自在に動きを表現できるように実践していきたいです。

次回は、「animation @keyframes」について書きます。お楽しみに♪