CSSの基本アニメーションのおさらい

2013-01-30

CSSの基本をもう一度しっかりおさえるため、CSSの基礎的なことをおさらいしていこうと思っています。今回はアニメーションです。ブログの場合だとそれほどアニメーションを使うところがないので、実は使い方がよく分からないんですよね・・・しかも、ブラウザごとに対応状況も異なるので難しいところです。

ただ、最近は対応しているブラウザも増えてきて、使えるなら使ってもいいかな？という感じ。ちなみにブラウザごとの対応状況をまとめたものがこちらにあります。

caniuse.com

アニメーションの細かい演出はjavascriptを使う必要がありそうですが、ここでは基本的なCSSを使ったアニメーションを復習していきます。

CSSの基本　transformプロパティ

transformを使うと画像やボックスの回転、縮小、移動、変形が出来るようになります。例えばサイドメニューのタイトル部分を少し傾けて変化を付けるというのを見たことがあります。ここで使う値は以下の４つ。translateとscaleにはX,Yがあります。

rotate:回転、rotate(45deg)
translate:移動、translate(10px,10px)
scale:拡大縮小、scale(1.5,1.5)
skew:ゆがみ、skew(15deg)

ではさっそくやってみるHTMLは以下のようにした。なにもしない状態だと下の画像のようになる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSSの基本　アニメーションのおさらい</title>
    <link rel="stylesheet" type="text/css" href="animation.css" media="all" />
</head>
<body>
<div id="container">
    <div id="rotate">ROTATE</div>
    <div id="translate">TRANSLATE</div>
    <div id="scale">SCALE</div>
    <div id="skew">SKEW</div>
</div>
</body>
</html>

これにそれぞれ値を入れてみると・・・

#rotate{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    }
#translate{
    -webkit-transform: translate(200px,50px);
    -moz-transform: translate(200px,50px);
    }
#scale{
    -webkit-transform: scale(0.8,0.5);
    -moz-transform: scale(0.8,0.5);
    }
#skew{
    -webkit-transform: skew(10deg);
    -webkit-transform: skew(10deg);
    }

こんな感じになった。ここではわかりやすく個別に指定したが、複数を同時にしてすることもできる。CSSで画像をゆがませてiTunesアートワークを作るでも書いたが、１枚の画像を使っていろんな形に変形できるので便利なときは便利。

CSSの基本　perspective

これは画像に遠近感を与えるプロパティで、これを指定することで奥行きを表現できるようになる。この値が小さいほどゆがみが大きくなる。また、transform-originと組み合わせることで変形の原点の位置も指定できる。ここで使う値は以下の２つ。

perspective:奥行きの指定、perspective(500)
transform-origin:原点の指定、transform-origin:0% 50% 0

先ほどと同じHTMLを使ってperspectiveとtransform-originを設定してみる。

#rotate{
    -webkit-transform: perspective(500) rotateY(50deg);
    -moz-transform: perspective(500) rotateY(50deg);
    }
#translate{
    -webkit-transform: perspective(500) rotateX(45deg);
    -moz-transform:perspective(500) rotateX(45deg);
    }
#scale{
    -webkit-transform: perspective(500) rotateY(50deg);
    -webkit-transform-origin: 0 50% 0;
    -moz-transform: perspective(500) rotateY(50deg);
    -moz-transform-origin: 0 50% 0;
    }
#skew{
    -webkit-transform: perspective(500) rotateX(50deg);
    -webkit-transform-origin: 0 50% 0;
    -moz-transform: perspective(500) rotateX(50deg);
    -moz-transform-origin: 0 50% 0;
    }

上２つはperspectiveのみ下２つはorigin付きでやってみた。originを指定しないとオブジェクトの中心を軸にして回転しているような感じ。originをつけると原点から回転している感じになる。３つめのイメージは立体的なサイドメニューとして使えそう。

CSSの基本　transitionプロパティ

さて、次はtransition。これはマウスオーバーなどのアクションをきっかけに始点と終点をアニメーションさせることができるもの。通常の状態を始点にして、:hoverで指定した値を終点にする、と考えるとわかりやすい。ここで使える値は４つ。５番目のようにまとめることができる。

duration:再生時間、１s
propaty:変化させるプロパティ、colorなど
timing-function:速度の調整（イージング）、ease-in
delay:指定した分だけ遅らせる、１s
transration:まとめて指定、1s color ease-in 0.5s

このプロパティを使ってマウスオーバーで大きさが変わるアニメーションをつけてみる。始点にtransrationをいれて値を設定する。

#transition{
    width: 150px;
    height: 50px;
    background-color: aqua;
    -webkit-transition: 1s ease-out all 0;
    -moz-transition: 1s ease-out all 0;
    }
    
#transition:hover{
    width: 200px;
    height: 100px;
    }

ここでは大きさだけ変えてみた。マウスを当てると徐々に大きくなって、離すと徐々に元に戻る。背景色の変更やポジションを変えてふわっと浮き上がったようなエフェクトを作ってみると面白そう。

CSSの基本　animationプロパティ

transitionでもアニメーションっぽいことができたが、変化は直線的なものになる。こちらはキーフレームを利用し始点と終点の間に複数の変化を設定できる。より本格的なアニメーションをつくることが可能。

animationプロパティの値は以下の６つ。

name:キーフレーム名
duration:再生時間、3s
timing-function:イージング、ease-out
delay:ディレイ、1s
iteration-count:繰り返し、2
direction:再生方向、alternate

このプロパティもtransitionと同様にanimationで１行で指定可能。画像は省くがこんな感じでCSSを書くと始点から終点向かって複雑な動きをする。

#animation{
    width: 150px;
    height: 150px;
    background-color: green;
    -webkit-animation: test 3s;
    -webkit-animation-play-state: paused;
    }
    
#animation:hover{
    -webkit-animation-play-state: running;
    }
    
@-webkit-keyframes test{
    0%  {background-color: aqua;}
    50% {background-color: blue;}
    100%{background-color: green;}
    }

ここでは上でanimationの設定をしている。一番下がキーフレームで、この背景色の指定に従って変化する。通常はページを開いた時点でアニメーションが開始されるので、マウスオーバーで動くようにするためanimation-play-stateプロパティでpausedを指定し、一時停止状態にしておく。hoverするとアニメーションが発動する。

ここまでアニメーションの基本を紹介しました。ブログでの使いどころはボタンのアニメーションくらい？でしょうか。が、これがあると非常に見た目に動きのある面白い表現ができるので使ってみたいですね。

以上でCSSの基本アニメーションのおさらいを終了します。