CSS入門 | CSS3変形 | Animation

Animation

CSS3では、animationプロパティを使用して、要素の現在のスタイルを別のスタイルへゆっくり変化させることができる。CSS2では、このような効果を表現するにはJavaScriptやFlashなどの外部プラグインを使用しなければならなかった。しかしCSS3では、アニメーション効果を簡単に適用できるようになった。

CSS3アニメーション(animation)の対応バージョン

CSS3アニメーション(animation)に対応している主要Webブラウザーのバージョンは次のとおりである。ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

プロパティ	ie	chrome	firefox	safari	opera
@keyframes / animation	10.0	43.0 / 4.0 -webkit-	16.0 / 5.0 -moz-	9.0 / 4.0 -webkit-	30.0 / 15.0 -webkit / 12.0 -o-

@keyframes規則

CSS3でアニメーション効果を使用するには、まずアニメーションのキーフレーム(keyframe)を定義する必要がある。キーフレーム(keyframe)には、特定の時間にその要素が持つべきCSSスタイルを指定する。

@keyframes規則の中にこのようにCSSスタイルを設定しておくと、その要素のスタイルは特定の時間まで、現在のスタイルから設定しておいた新しいスタイルへゆっくり変化する。

アニメーション効果を動作させるには、まずanimation-nameプロパティを使って要素とキーフレームを関連付ける必要がある。

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s;
        animation-name: movingPara;
        animation-duration: 3s;
    }
    @keyframes movingPara {
        from { margin-left: 100%; }
        to { margin-left: 0%; }
    }
</style>

上の例では、fromキーワードに最初のスタイルを指定し、toキーワードに最後のスタイルを指定する。

ただし、より複雑なアニメーション効果を表すには、fromキーワードやtoキーワードの代わりにパーセント(%)を使用できる。0%には最初のスタイルを、100%には最後のスタイルを指定し、途中に必要な数だけキーフレームを作成できる。

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
    @-webkit-keyframes movingPara {
        0% { border-color: red; }
        20% { border-color: orange; }
        40% { border-color: yellow; }
        50% { border-color: green; }
        60% { border-color: blue; }
        80% { border-color: navy; }
        100% { border-color: purple; }
    }
</style>

再生がすべて終わったアニメーション効果は、その要素を最初に持っていたスタイルへ戻す。

animation-durationプロパティ

animation-durationプロパティは、アニメーション効果を再生する時間を設定する。再生時間の既定値は0秒なので、再生時間を指定しなければ何の効果も現れない。

animation-delayプロパティ

animation-delayプロパティは、アニメーション効果が現れるまでの遅延時間を設定する。アニメーション効果は、このプロパティ値で設定された時間が経過して初めて開始される。

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        -webkit-animation-delay: 2s;
        animation-name: movingPara;
        animation-duration: 4s;
        animation-delay: 2s;
    }
</style>

animation-iteration-countプロパティ

animation-iteration-countプロパティは、アニメーション効果の繰り返し回数を設定する。このプロパティ値にinfiniteを設定すると、アニメーション効果が無限に繰り返される。

<style>
    #one, #loop {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
    #one {
        -webkit-animation-iteration-count: 2;
        animation-iteration-count: 2;
    }
    #loop {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }
</style>

animation-directionプロパティ

animation-directionプロパティは、アニメーションの進行方向を設定する。進行方向を表すプロパティ値としてreverseとalternateを設定できる。

reverse値は、アニメーション効果の進行方向を本来の方向ではなく反対方向へ変更する。つまり、アニメーション効果がfromからto方向ではなく、toからfrom方向へ進行する。

<style>
    div {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 2s;
        animation-name: movingPara;
        animation-duration: 2s;
    }
    #backward {
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
    }
</style>

alternate値は、アニメーション効果の進行方向を、アニメーションが繰り返されるたびに変更する。つまり、アニメーション効果がfromからto方向へ一度進行した後、次回はtoからfrom方向へ進行するように変更する。このように交互に、全体の繰り返し回数だけアニメーションを繰り返す。

<style>
    div {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 4;
        animation-name: movingPara;
        animation-duration: 2s;
        animation-iteration-count: 4;
    }
    #backward {
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
</style>

animation-timing-functionプロパティ

animation-timing-functionプロパティは、アニメーション効果の時間あたりの速度を設定する。

animation-timing-functionプロパティの値には、次のような値を設定できる。

linear : アニメーション効果が最初から最後まで一定の速度で進行する。
ease : 既定値で、アニメーション効果がゆっくり始まり、その後速くなり、最後にまた遅くなる。
ease-in : アニメーション効果がゆっくり始まる。
ease-out : アニメーション効果がゆっくり終わる。
ease-in-out : アニメーション効果がゆっくり始まり、ゆっくり終わる。
cubic-bezier(n,n,n,n) : アニメーション効果がユーザー定義のcubic-bezier関数に従って進行する。

<style>
    div {
        -webkit-animation: timingFunc 4s 3;
        animation: timingFunc 4s 3;
    }
    #div_01 {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    #div_05 {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    @keyframes timingFunc {
        from { left: 0px; }
        to { left: 300px; }
    }
</style>

アニメーション短縮表記(animation shorthand)

すべてのanimationプロパティを使ったスタイルを1行で設定できる。

<style>
    div {
        animation-name: myShorthand;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-direction: alternate;
    }
</style>

上の例とまったく同じアニメーション効果を、次のように表現できる。

構文

div { animation: myShorthand 3s ease-in-out 1s 3 alternate; }

<style>
    #long {
        -webkit-animation-name: myShorthand;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-delay: 1s;
        -webkit-animation-iteration-count: 3;
        -webkit-animation-direction: reverse;
        animation-name: myShorthand;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-direction: reverse;
    }
    #short {
        -webkit-animation: myShorthand 3s ease-in-out 1s 3 reverse;
        animation: myShorthand 3s ease-in-out 1s 3 reverse;
    }
</style>

CSS3 animationプロパティ

プロパティ	説明
animation	すべてのanimationプロパティを使ったスタイルを1行で設定できる。
animation-name	アニメーション効果の名前を設定する。
animation-duration	アニメーション効果を再生する時間を設定する。
animation-delay	アニメーション効果が現れるまでの遅延時間を設定する。
animation-iteration-count	アニメーション効果が何回繰り返されるかを設定する。
animation-direction	アニメーションの進行方向を設定する。
animation-timing-function	アニメーション効果の時間あたりの速度を設定する。
animation-fill-mode	アニメーション効果が再生中でないときの要素のスタイルを設定する。
animation-play-state	アニメーション効果の再生状態を設定する。