CSS3で簡単アニメーション！画像や要素を動かせる！背景色が変化する！

2015/07/22
- HTML&CSS

JavaScriptは分かんなーい！という方も、CSS3を使ったアニメーションはキーフレームでの指定なので簡単かも！？

まずはサンプルからどうぞ！

サンプル１「移動」

CSS3

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプル１「移動」</title>
    <style type="text/css">
    @keyframes moveimg {
        0% { left: 0px; top: 0px;}
        50% { left: 100px; }
        100% { left: 100px; top: 100px; }
    }

    #sample1{
        animation: moveimg 5s infinite;
        position: relative;
    }
    </style>
</head>
<body>

    <img src="CSS3.png" id="sample1">

</body>
</html>

※ @keyframes のプレフィックスは省略しています。

サンプル２「背景色の変化」

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプル２「背景色の変化」</title>
    <style type="text/css">
    @keyframes bgcolor {
        0% { background-color: #aeff00; }
        50% { background-color: #ffae00; }
        75% { background-color: #ff008a; }
        100% { background-color: #aeff00; }
    }

    #sample2 {
        background-color: #aeff00;
        width: 500px;
        height: 200px;
        border: 1px solid #666;
        animation: bgcolor 10s infinite;
    }
    </style>
</head>
<body>
    <p id="sample2">背景色が変わります</p>
</body>
</html>

※ @keyframes のプレフィックスは省略しています。

サンプル３「ゆらゆら」

このBOXがゆらゆら

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプル３「ゆらゆら」</title>
    <style type="text/css">

    @keyframes yurayura {
        0% { transform: rotate(0deg); }
        25% { transform: rotate(15deg); }
        50% { transform: rotate(0deg); }
        75% { transform: rotate(-15deg); }
        100% { transform: rotate(0deg); }
    }

    #sample3 {
        animation: yurayura 3s linear infinite;
        border: 1px solid #ccc;
        width: 200px;
        text-align: center;
        margin: 300px auto 0;
        background-color: #c00;
    }
    </style>
</head>
<body>

    <p id="sample3">このBOXがゆらゆら</p>

</body>
</html>

※ @keyframes のプレフィックスは省略しています。

キーフレームの設定

まずは、CSSの中でキーフレームを設定します。

キーフレームとは、CGのアニメーションの中で主となる変化が定義されているフレームのことである。物体の形や位置の変化ポイントが指定され、その間を補完することで滑らかな動画像が作成される。
「IT用語辞典バイナリ」より

@keyframes 任意の名前 {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(15deg); }
	100% { transform: rotate(0deg); }
}

パーセント（％）でキーフレームを指定します。

上の例では、「0%、50%、100%」の３ヶ所をキーフレームにしており、0%時に0度、50%時に15度まで回転し、100%時に0度まで戻ります。@keyframesの後に任意の名前をつけます。この名前は、後で使用します。

なお、webkit系のレンダリングエンジンを使用しているブラウザにはプレフィックスが必要です。プレフィックスは「@-webkit-keyframes」とつけます。

上のサンプル１「ゆらゆら」にプレフィックスをつける場合は、次の様に記述します。

@-webkit-keyframes yurayura {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(15deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(-15deg); }
	100% { transform: rotate(0deg); }
}
@keyframes yurayura {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(15deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(-15deg); }
	100% { transform: rotate(0deg); }
}

animationプロパティ

animationプロパティでアニメーションの設定を記述します。

animation-name

@keyframesで設定した名前を指定します。

animation-duration

アニメーションの長さを秒数で指定します。指定方法は「秒数s」と数字にsを付けて指定します。

animation-timing-function

アニメーションのタイミングや進行割合を指定する際に使用します。

ease ・・・滑らかに（初期値）
linear ・・・一定
ease-in ・・・ゆっくり始まる
ease-out ・・・ゆっくり終わる
ease-in-out ・・・ゆっくり始まってゆっくり終わる

animation-delay

アニメーションがいつ始まるかを指定します。初期値は０ゼロで、すぐに開始されます。

animation-iteration-count

アニメーションを繰り返す回数を数字で指定します。

数字・・・数字の回数分繰り返します。
infinite ・・・無限に繰り返します。

animation-direction

アニメーションを交互に反転再生させるかどうかを指定する

normal ・・・普通にアニメーションを繰り返します（初期値）
alternate ・・・奇数回は普通に、偶数回は逆再生でアニメーションを繰り返します。

animation-play-state

アニメーションの再生と一時停止を指定します。ロールオーバで一時停止とかって時に使用する？

running ・・・再生（初期値）
paused ・・・一時停止

animation-play-state

再生前後の状態を指定します。

none ・・・アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されない。（初期値）
forwards ・・・再生後、最後のキーフレームの状態を保持
backwards ・・・再生前、最初のキーフレームの状態を適用
both ・・・ forwards と backwards の両方を適用

実際の記述

サンプル３「ゆらゆら」のanimationプロパティを１つ１つ記述すると次の様になります。
animation-name : yurayura;
animation-duration : 3s;
animation-timing-function : linear;
animation-iteration-count : infinite;

animationプロパティもbackgroundプロパティなどと同様にまとめて記述することができます。

animation: yurayura 3s linear infinite;

魅せるスマートフォンサイトを実現！CSS3アニメーション・ブック for iPhone & Android