2015/10/13

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition（トランジション）とtransform（トランスフォーム）のチュートリアルです。
海外の有名ブログから、わかりやすいチュートリアルを選んで翻訳してみました（結構、意訳したり、説明を付け足しています）。
CSS3 transitionとtransformを使ったサイトは、かなり頻繁に見かけます。
なめらかで楽しいその動きに、思わず手を止めて見てしまう人も多いのではないでしょうか。
そんなCSS3 transitionとtransformを実装できると、本人としても楽しくなってきますよね。
今回のチュートリアルでは、CSS3 transitionとtransformの基本的なところから、ご説明したいと思います。
実際に制作するサンプルは、以下のようなシンプルなものです。

See the Pen vNZrwQ by yugusato (@yugusato) on CodePen.

CSS3 transitionとtransformのご参考になれば幸いです。

transitionはカーソルを重ねるなどの動作で、始点と終点のアニメーションを変化させるプロパティ

transitionプロパティというのは、たとえば、要素にカーソルを重ねたときに、リンクのデザインをアニメーションさせることのできるプロパティです。
たとえば、始点＝a要素、終点はa:hoverで、それぞれにCSSでデザインを設定します。
以下のようなCSSがあったとします。
このままでは、要素をカーソルに合わせたときに、いきなり背景色が変化するだけです。

このコードにtransitionを加えると以下のようになります。
transitionにはベンダープリフィックスをつけます。
ベンダープリフィックスを一度に付けたい場合は、「Express Prefixr」が便利ですよ。

これで、カーソルを合わせたときに、ふわりとしたアニメーションで変化するようになります。

See the Pen XmgNOg by yugusato (@yugusato) on CodePen.

ここで使用している「transition: all 0.3s ease;」は複数のプロパティをまとめたもの（ショートハンド）です。
「all」はすべてのプロパティを対象に、「0.3s」は変化に要する時間、「ease」は変化のスピードです。
この変化のスピードには、linear（一定の速度で再生）、ease（最初と最後を滑らかに再生）、ease-in（最初をゆっくり再生）、ease-out（最後をゆっくり再生）、ease-in-out（最初と最後をゆっくり再生）、cubic-bezier（より細かく指定する場合に利用）などがあります。

transformはxy座標を利用する

transformプロパティもアニメーションのように動きますが、animationプロパティとは異なります。
animationプロパティがキーフレームを利用するのに対して、transformプロパティではxy座標を利用します。
具体的には以下のようなイメージです。

transformプロパティでは、要素がこのxy座標の原点（0,0）に配置され、移動（translate）、回転（rotate）、拡大縮小（scale）などの動きをつけることが可能になります。

水平に右へ移動させる

transitionとtransformを組み合わせて実装してみましょう。
最初は、要素が水平に右へ移動するデモです。
水平移動させるには、transform: translate(x,y);を利用します。
HTMLは以下のようになります。

以上の要素に対してCSSを設定します。
まずは中央付近に配置します。

この要素に対して、350px右に移動させることにします。
さらに、要素の背景にあたる#axisにカーソルが乗ったときに、移動がスタートするようにします。

これで右350pxに移動するようになりましたが、transitionの設定をしていないために突然、瞬間移動のようなります。
始点と終点の間をアニメーションさせるために、transitionプロパティを加えます。

「all」ですべてのプロパティを対象に、「2s」で変化に要する時間を2秒に、「ease-in-out」で最初と最後をゆっくり再生にしています。
デモは以下のようになります。

See the Pen vNZarB by yugusato (@yugusato) on CodePen.

水平に左へ移動させる

続いては、さきほどとはまったく逆の水平に左へと移動させてみましょう。
350px左へ移動させるので、-350px移動させることになります。
HTMLは以下のようにします。

CSSは、水平右方向とは逆に、transform: translateの値を-350pxに変えるだけです。

デモは以下のようになります。

See the Pen pjwKjX by yugusato (@yugusato) on CodePen.

もうイメージが掴めてしまいました？

垂直に上方向へ移動させる

今度は垂直方向に移動させます。
水平やX軸でしたので、垂直はY軸の値を設定することになります。
ただし、注意が必要なのはY軸の値です。
通常のXY軸では、上方向はプラス、下方向はマイナスだと思いますが、transformで利用するY軸は上方向がマイナス、下方向がプラスになります。
この点だけ注意しましょう。

まずはHTMLです。

続いてはCSS。
上方向に350px移動させたいので、transform: translateにマイナスの値を設定します。

デモは以下のようになります。

See the Pen yYXEJB by yugusato (@yugusato) on CodePen.

垂直に下方向へ移動させる

今度は垂直に下方向へ移動させます。
先ほどとY軸の値が、逆になるだけです。
下方向に移動するので値はプラスになります。

まずはHTMLです。

続いてはCSS。
下方向に350px移動させたいので、transform: translateにプラスの値を設定します。

デモでは以下のようになります。

See the Pen EVXRNg by yugusato (@yugusato) on CodePen.

対角線、右上方向へ移動させる

今度は対角線上に右上方向へ移動させてみましょう。
対角線の右上方向ですので、X=350px、Y=-350pxという値になります。
もう簡単ですね。
まずはHTMLです。

続いてはCSS。
対角線の右上方向に移動させたいので、transform: translateにX=350px、Y=-350pxを設定します。

デモでは以下のようになります。

See the Pen epRKrd by yugusato (@yugusato) on CodePen.

対角線、左下方向へ移動させる

今度は対角線上に左下方向へ移動させてみましょう。
もうおわかりと思いますが、念のためです。
対角線の左下方向ですので、X=-350px、Y=350pxという値になります。
まずはHTMLです。

続いてはCSS。
対角線の左下方向に移動させたいので、transform: translateにX=-350px、Y=350pxを設定します。

デモでは以下のようになります。

See the Pen avwKay by yugusato (@yugusato) on CodePen.

右回りに回転させる

続いては要素を回転させてみましょう。
最初は右回り（時計回り）です。
要素を回転させるには、transform: rotate(deg)を利用します。
degには回転の角度を記入します。
一回転させたいなら360degとなります。
ではHTMLから。

続いてCSS。今回は右まわりに一回転させたいので、transform: rotate(360deg);となります。

デモは以下のようになります。

See the Pen QjgxJw by yugusato (@yugusato) on CodePen.

左回りに回転させる

今度は左回りです。
左回りですから、さっきと逆ですね。
ではHTMLから。

続いてCSS。今回は左回りに一回転させたいので、transform: rotate(-360deg);となります。

デモは以下のようになります。

See the Pen XmgYoR by yugusato (@yugusato) on CodePen.

拡大させる

今度は要素を拡大させてみましょう。
拡大させるには、transform: scale(n)、もしくは、transform: scale(x,y)を利用します。
nには倍率を記入します。200%に拡大したい場合はtransform: scale(2)となります。
X軸、Y軸で拡大率を変えたい場合は、transform: scale(x,y)を利用します。
たとえば、横方向では200％拡大、縦方向では300％拡大したいといった場合には、transform: scale(2,3)と記述します。
ではHTMLから。

続いてCSS。200%拡大させたいので、transform: scale(2)とします。

デモは以下のようになります。

See the Pen gaRKEE by yugusato (@yugusato) on CodePen.

複合的な動きをつける（移動＋回転＋拡大）

最後は、これまでの動きを組み合わせた動きを実装してみます。
transformプロパティは複数のプロパティをもつことができるので、いろいろな動きを組み合わせることが可能です。
ここでは、対角線右上方向に移動しながら回転しつつ、200％拡大させてみましょう。
まずはHTMLです。

続いてCSSです。
対角線右上方向に移動しながら回転しつつ、200％拡大ですから、translate(350px,-350px) rotate(360deg) scale(2)となります。

デモは以下のようになります。

See the Pen vNZrwQ by yugusato (@yugusato) on CodePen.

複合的な動きでは、記述の順番に注意しましょう。
記述の順番が変わるだけで、動きがまったくことなってきます。
たとえば、先ほどのデモで、 translate(350px,-350px)とrotate(360deg)の順番を逆にしてみるとどうなるのでしょうか。
実際には以下のようになります。

See the Pen EVXpao by yugusato (@yugusato) on CodePen.

これはこれで面白い動きになりますが、意図した動きになっていませんね。
transformプロパティを利用する場合には、記述の順番に注意して実装してください。

こちらの記事はCSS3 transition And transform From Scratchをもとに作成しました。

Sponsored by

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。