CSSデザインテクニック

CSSだけでアニメーションを作成する(CSS Transition・CSS Transform)

最近では動きのあるWebサイトがトレンドになっており、 ちょっとしたアニメーションだったらどんなページでも見られるようになってきました。 今回はCSSだけでアニメーションを作成する基礎部分を説明したいと思います!

  • HTML・CSS

公開日:2019/07/11最終更新日:2019/07/11

スポンサーリンク

1.CSSのみでアニメーション

動きのあるWebサイトって見ていて楽しいですよね。

せっかくWeb制作を始めたのなら綺麗な動きのあるページを作りたいかと思います。

「でも難しいんじゃ・・」「JavaScriptとか必要でしょ・・・」とか思ってませんか?

今回はCSSのみで超簡単にアニメーションを実装する方法を紹介します!
 

2.transformとtransition

今回はtransformtransitionプロパティを使用して簡単にアニメーションを実装したいと思います!

transformとtransitionはどちらもCSS3より出てきたプロパティで、それぞれ直訳するとtransform → 「変形」transition → 「遷移」という意味です。
その名の通りtransformは「要素を変形」させ、transitionは「変形までの時間」を設定します。

transformの使い方

例えばここに100pxの正方形があります。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

この要素に「transform:rotate(45deg);」を適応させます。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

「transform:rotate」は要素を回転させます。

(45deg)という部分で角度を指定しており、これだと「45度回転させる」という意味になります。

transition

transformを使用して要素を変形させることができるという事がわかったと思います。しかしこれだけではただ単に要素を変形させただけで、アニメーションではありません。ここでtransitionを使用し、要素の変形に時間を掛けさせることでアニメーションとなります。

まず先ほど作成した要素に「transition:1s」をつけてみましょう。

※要素にマウスカーソルをあわせてみてください。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

※今回はわかりやすいようにホバー時にアニメーションするよう指定しています。

正方形の要素が右に回転するアニメーションになりましたね!

このように要素を変形させて、その変形までの時間を調整する事によって簡単なアニメーションを作ることができます!

3.transformのプロパティ

それではここで「transform」を使って要素を変形させることができるプロパティをご紹介します。

translate

translateは要素を移動させるプロパティです。

transform:translate(X軸の距離,Y軸の距離);

基本形はこのような形で記述します。ご存知かもしれませんが、X軸は横・Y軸は縦です。

また次のように記述することもできます。

transform:translateX(X軸の距離);
transform:translateY(Y軸の距離);

例えば下記のような要素に

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

transform:translateX(100px);

を指定するとこのように100px右に移動します。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

またtranslateはZ軸(前後)にも移動させることができます。

transform:translate3d(X軸の距離,Y軸の距離,Z軸の距離);

と記述します。

またZ軸のみ移動させたい場合は、他方向と同様にこのように記述します。

transform:translateZ(Z軸の距離);

ここで一点注意事項があります。

単純に上記のみを記載した場合要素の奥行きが無いままの状態(平面)ですので、Z軸方向に動いても何も変化がありません。

そこで要素に奥行きを持たせるperspectiveを同時に指定します。

transform:perspective(200px) translateZ(50px);

これで奥行きが200pxある中で50px前に移動するという形になります。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

rotate

こちらは先ほども使用しましたね!要素を回転させるプロパティです。

transform:rotate(回転させる角度);

という風に記述します。

デフォルトはZ軸に回転します。

rotateも先ほどのtransformと同様に各方向へ回転を指定することができます。

※要素にマウスカーソルをあわせてみてください。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

scale

scaleは要素を伸縮させるプロパティです。

transform:scale(X軸の長さ,Y軸の長さ);

もうお馴染みの記述ですね。

もちろんscaleも下記の記述ができます。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

transform:scaleY(1.5);

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

Z軸は少し見た目がわかりにくいかもしれません。

イメージしていただくとわかる通り、前後方向へ伸縮しても画面ではわかりませんよね?

つまり何も変形していない要素に指定しても変化はありません。

そこで先ほども登場した「要素に奥行きを持たせるperspective」を同時に指定します。

そして奥行きがわかるように要素を少し回転させた上で、z軸方向に伸縮させてみます。

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

少しわかりにくいかもしれませんが、このように伸縮します。

skew

skewは傾斜を設定できるプロパティです。

要素を縦横に傾ける事ができます。

transform:skew(X軸の角度,Y軸の角度);

いつも通り下記の記述も可能です。

transform:skewX(15deg);

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

transform:skewY(15deg);

See the Pen box by Yoshiki Kojima (@yoshikikoji) on CodePen.

skewプロパティは少し使い方が難しいかもしれませんね。

4.transitionのプロパティ

続いては「transition」に関連する各プロパティをご紹介します。

transition-duration

transition-durationは時間を指定する事ができます。

書き方は違うものの、先ほどの例で1sを指定したプロパティです。

transition-duration:数値;

上記のように記述し、数値はs(秒)ms(ミリ秒)で指定します。

1s=1秒1ms=1/1000秒となります。

要素の変化が完了するまでに3秒かけたい場合は

transition-duration:3s;

という記述になります。

transition-property

transition-propertyはtransitionをかけるプロパティを指定するプロパティです。

初期値はall(全てのプロパティが対象)で、逆に全てを非対象にする場合はnoneを記載します。

例えば

transition-property:transform;

と記載するとtransformのみがtransitionの対象となります。

transition-timing-function

transition-timing-functionは変化の度合いを指定するプロパティです。

下記のようなプロパティがあります。

ease

開始時と終了時の変化を緩やかに

linear

変化全体を一定に

ease-in

開始時は緩やかに、終了時は早く変化

ease-out

ease-inとは逆に開始時は早く終了時は緩やかに

ease-in-out    

開始時と終了時の変化をeaseより緩やかに

もっと細かく変化を指定したい場合はcubic-bezierというプロパティを使うこともできますが、こちらは少し複雑なうえ使用する事はあまり無いかと思われますので割愛させていただきます。

transition-delay

transition-delayは変化が始まるまでの時間を指定できます。

transition-delay:数値;

と記述し、数値の指定方法はtransition-durationと同様にs(秒)ms(ミリ秒)で指定します。

5.まとめ

実はtransformとtransitionは奥が深く、今回紹介した以外にも設定できるプロパティがあります。しかし今回ご紹介させていただいたプロパティを組み合わせるだけでも色々なアニメーションが作成できるかと思います。transformだけではなく、例えばwidthを50px→100pxにしてtransition-durationをかけるだけでも要素が横に大きくなるアニメーションを表現できます。その他のプロパティと組み合わせるとかなり多彩なアニメーションが作れそうですよね!

ご自身のアイデアとあわせて、CSSで様々なアニメーションの作成に挑戦してみてください!

理解度チェック

スポンサーリンク

このレッスンの著者