1.CSSのみでアニメーション
動きのあるWebサイトって見ていて楽しいですよね。
せっかくWeb制作を始めたのなら綺麗な動きのあるページを作りたいかと思います。
「でも難しいんじゃ・・」「JavaScriptとか必要でしょ・・・」とか思ってませんか？
今回はCSSのみで超簡単にアニメーションを実装する方法を紹介します！
2.transformとtransition
今回はtransformとtransitionプロパティを使用して簡単にアニメーションを実装したいと思います！
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で様々なアニメーションの作成に挑戦してみてください！
