CSS3 アニメーションは、JavaScript や Flash を使わずに、ほとんどの HTML 要素のアニメーションを可能にします！

アニメーションのブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -webkit-、-moz- または -o- は、接頭辞付きで動作した最初のバージョンです。

プロパティ
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS3 アニメーションとは？

アニメーションとは、或るスタイルから別のものに要素を徐々に変化させることです。

あなたが望む限り多くの CSS プロパティを、必要な回数だけ変化させることができます。

CSS3 アニメーションを使用するには、最初に、アニメーションに対する幾つかのキーフレームを指定しなければなりません。

キーフレームは、ある一定の時間に要素がどのようなスタイルであるかを保有しています。

@keyframes 規則

@keyframes 規則の中に CSS スタイルを指定すると、一定の時間内に、アニメーションは現在のスタイルから新しいスタイルに徐々に遷移します。

アニメーションを動作させるには、アニメーションを要素に結合しなければなりません。

次の例は、"example" アニメーションを <div> 要素に結合します。アニメーションは、4秒間続き、<div> 要素の背景色が「赤」から「黄」に徐々に変化します：

例

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Try it Yourself ❯

注:animation-duration プロパティを指定しない場合、デフォルト値が 0 のため、何のアニメーション効果も表れません。

上の例で、（0% (開始) と 100% (完了) を表す）キーワード "from" と "to" を使用してスタイルがいつ変化するかを指定しています。

これには、パーセントを使用することもできます。パーセントを使用することで、沢山のスタイルの変化を好きなように追加することができます。

次の例は、アニメーションが 25％および 50% 完了したときに <div> 要素の背景色が変化し、そして 100％完了すると再び要素の背景色が変化します：

例

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Try it Yourself ❯

次の例は、アニメーションが 25％および 50% 完了したときに <div> 要素の背景色と位置が変化し、そして 100％完了すると再び要素の背景色と位置が変化します：

例

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25% {background-color: yellow; left:200px; top:0px;}
    50% {background-color: blue; left:200px; top:200px;}
    75% {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Try it Yourself ❯

アニメーションの遅延

animation-delay プロパティは、アニメーションの開始の遅延を指定します。

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

Try it Yourself ❯

アニメーションが実行する回数を設定

animation-iteration-count プロパティは、アニメーションを実行する回数を指定します。

次の例は、停止するまでにアニメーションを 3回実行します：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

Try it Yourself ❯

次の例は、アニメーションを永久に実行させるために、値 "infinite" を使用しています：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Try it Yourself ❯

逆方向または順逆交互のアニメーションの実行

animation-direction プロパティは、アニメーションを逆方向または順逆交互に実行させるために使用します。

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}

Try it Yourself ❯

次の例は、最初は順方向に、次は逆方向に、またその次は順方向にアニメーションを実行するため、値 "alternate" を使用します：

例

Try it Yourself ❯

アニメーションの速度曲線を指定

animation-timing-function プロパティは、アニメーションの速度曲線を指定します。

animation-timing-function プロパティには、次の値を設定できます：

次の例は、使用することができる、いろいろな速度曲線の一部を示しています：

例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Try it Yourself ❯

アニメーション・ショートハンド・プロパティ

次の例では、アニメーションのプロパティの 6つを使用しています：

例

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Try it Yourself ❯

上記と同様のアニメーション効果は、ショートハンド animation プロパティを使用しても可能です：

練習問題で確認テスト！

CSS3 アニメーション・プロパティ

次の表は、@keyframes 規則と全 animation プロパティの一覧です：

プロパティ	説明
@keyframes	アニメーション・コードを指定する
animation	全ての animation プロパティへのショートハンド・プロパティ
animation-delay	アニメーションが開始するまでの遅延時間を指定する
animation-direction	アニメーションを逆方向または順逆交互に再生させるかどうかを指定する
animation-duration	Sアニメーションの 1 サイクルに必要な秒数またはミリ秒数を指定する
animation-fill-mode	アニメーションが再生中以外（終了したか、または delay 中）の場合、要素にどのようなスタイルを適用するかを指定する
animation-iteration-count	アニメーションの再生回数を指定する
animation-name	@keyframes アニメーションの名前を指定する
animation-play-state	アニメーションが再生中か一時停止中かを指定する
animation-timing-function	アニメーションの速度曲線を指定する