Your Search Results

    CSS アニメーション

    CSS3 animations は、ある CSS のスタイル設定を別の設定へ遷移させることを可能にします。アニメーションは 2 種類の要素で構成されており、それはアニメーションについて記述するスタイルと、アニメーションの始めと終わりの CSS スタイルを示すキーフレームです。同様に、アニメーションの途中で通過点となるスタイルを示すこともできます。

    CSS animations は、従来のスクリプトによるアニメーションに比べて 3 つの長所があります。

    1. 単純なアニメーション向けに使いやすいです。つまり、JavaScript を知らない場合でもアニメーションを作ることができます。
    2. アニメーションは中程度のシステム負荷で、良く動作します。JavaScript では、(上手に作成しなければ) 単純なアニメーションでもシステムの負荷を高めてしまうことがあります。レンダリングエンジンは可能な限りパフォーマンスをなめらかに保つため、フレームを省略するなどの技術を用いることができます。
    3. ブラウザはアニメーションの流れを制御して、パフォーマンスや効率を最適化します。例えば、アクティブではないタブで動作しているアニメーションは、更新の頻度を減らします。

    アニメーションの設定

    CSS animation の流れを作成するには、アニメーションさせたい要素に animation プロパティまたはそのサブプロパティを付加します。このプロパティはアニメーションのタイミングと長さを設定します。同様に、アニメーションをどのように進めるかの詳細も設定できます。なお、このプロパティはアニメーションの外見を指定するものではありません。それらは、後述の キーフレームを用いたアニメーションの流れの定義 で説明する @keyframes @ 規則で定義します。

    animation プロパティのサブプロパティは下記のとおりです:

    animation-delay
    要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。
    animation-direction
    アニメーションするたびに、逆方向のアニメーションを行ってからアニメーションを繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。
    animation-duration
    1 回のアニメーションサイクルを行う時間の長さを設定します。
    animation-iteration-count
    アニメーションを何回繰り返すかを設定します。アニメーションを無期限に繰り返すことを示す infinite を指定することもできます。
    animation-name
    アニメーションのキーフレームを示す @keyframes @ 規則の名前を指定します。
    animation-play-state
    アニメーションを一時停止したり、再開したりすることができます。
    animation-timing-function
    アニメーションの進め方を設定します。これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。
    animation-fill-mode
    アニメーションの実行前後に、指定したスタイルを適用するかを設定します。

    キーフレームを用いたアニメーションの流れの定義

    アニメーションのタイミングを指定した後は、アニメーションの外見を定義することが必要です。これは、@keyframes @ 規則を用いて 2 つまたはそれ以上のキーフレームを定義することです。各キーフレームは、アニメーションの流れの中で要素がどのように表現されるかを記述します。

    CSS スタイルでアニメーションのタイミングを定義するため、キーフレームは percentage で、アニメーションの流れの中でいつそのスタイルが適用されるかを示します。0% はアニメーションの始点、100% はアニメーションが終点を表します。これら 2 つの値は、ブラウザがアニメーションの始まりと終わりを理解するために必ず指定する必要があります。これは重要なことであるため、特に 0% と 100% はそれぞれ from および to で代替できます。

    また、任意でアニメーションの始まりと終わりの中間地点を定義するキーフレームを挿入することも可能です。

    注意: 以下の例では、アニメーションの CSS プロパティに接頭辞を付加していません。古いブラウザでは接頭辞が必要です。クリックして参照できる実際の表示には、-webkit プレフィクスを付加したプロパティも含まれています。

    文字列がブラウザのウィンドウを横切る

    この例では文字列がブラウザのウィンドウ右端の外側からすべり込むように、<h1> 要素へスタイルを設定しています。

    h1 {
      animation-duration: 3s;
      animation-name: slidein;
    }
    
    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 300%
      }
    
      to {
        margin-left: 0%;
        width: 100%;
      }
    }

    <h1> 要素では、アニメーションの始まりから終わりまでの実行に 3 秒かけることを animation-duration プロパティで定義しています。また、アニメーションのキーフレームを定義する @keyframes @ 規則の名前が "slidein" であることを定義しています。

    <h1> 要素に CSS animation をサポートしないブラウザでのスタイルを設定したい場合は、この部分にそれらのスタイルを含めてください。ただし、この例ではアニメーション効果以外のスタイル付けは必要ありません。

    キーフレームは @keyframes @ 規則で定義します。この例には、2 つのキーフレームがあります。1 番目のキーフレームは 0% (代替表記の from を使用しています) です。ここでは、要素の左マージンを 100% (包含要素の右端を示します) に、要素の幅を 300% (包含要素の幅の 3 倍) に設定しています。これによりアニメーションの始まりの時点では、見出しがブラウザのウィンドウの右端の外側に描画されます。

    2 番目 (かつ最後) のキーフレームは、100% (代替表記の to を使用しています) です。要素の左マージンを 0% に、幅を 100% に設定しています。これにより、見出しがコンテンツエリアの左端へすべり込むことでアニメーションが終わります。

    実際の表示を確認

    キーフレームを追加する

    先ほどのアニメーション例に、他のキーフレームを追加してみましょう。例えば、見出しが右から左へ動くのにあわせて文字サイズを大きくしてゆき、その後元のサイズへ戻るようにしたいとします。これには、単純に以下のキーフレームを追加します:

    75% {
      font-size: 300%;
      margin-left: 25%;
      width: 150%;
    }

    これはブラウザに、アニメーションの流れの 75% 経過時点で見出しの左マージンを 25% に、また幅を 150% にするよう設定します。

    実際の表示を確認

    アニメーションを繰り返す

    アニメーションを繰り返すためには animation-iteration-count を用いて、アニメーションを何回繰り返すかを設定します。以下の例では、infinite を指定してアニメーションを無期限に繰り返します:

    h1 {
      animation-duration: 3s;
      animation-name: slidein;
      animation-iteration-count: infinite;
    }
    

    実際の表示を確認

    前後に移動させる

    アニメーションを繰り返すようにしましたが、毎回始めの状態にジャンプしてアニメーションが始まるのはとても不自然です。画面上を前後に移動するようにしたいでしょう。これは、animation-direction プロパティに alternate を設定することで簡単に実現できます:

    h1 {
      animation-duration: 3s;
      animation-name: slidein;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    

    実際の表示を確認

    アニメーションイベントを使う

    アニメーションイベントを用いることで、アニメーションをさらに制御することやアニメーションの有用な情報を得ることができます。これらのイベントは AnimationEvent オブジェクトに集められており、アニメーションの開始・終了・繰り返しの始まりを検出することができます。それぞれのイベントには発生した時間や、イベントが発生したアニメーションの名前が含まれています。

    文字列がすべり込むアニメーションの例について、アニメーションがいつ発生したかの情報を出力するように変更して、イベントがどのように働くかを見てみましょう。

    アニメーションイベントのリスナーを追加する

    使用することができる 3 つのアニメーションイベントを取得するため、JavaScript のコードを用います。setup() 関数は、イベントのリスナーになります。この関数は文書が読み込まれたとき、最初に呼び出します。

    function setup() {
      var e = document.getElementById("watchme");
      e.addEventListener("animationstart", listener, false);
      e.addEventListener("animationend", listener, false);
      e.addEventListener("animationiteration", listener, false);
      
      var e = document.getElementById("watchme");
      e.className = "slidein";
    }
    

    これは一般的なコードです。このコードがどのように働くかについて、詳しくは element.addEventListener() の文書を参照してください。最後に setup() 関数では要素の class 属性を、アニメーションを設定したクラス "slidein" に設定しています。これによりアニメーションを開始させています。

    なぜこのような処理を行うのでしょうか? それは、animationstart イベントはアニメーションが始まるとすぐに発生するので、この例ではコードを実行する前にイベントが発生してしまうためです。そこでコードの実行後に要素の class 属性をアニメーションのスタイルを記述したものに設定することで、アニメーションを開始させるようにしています。

    イベントを受け取る

    イベントは、以下の listener() 関数に送られます。

    function listener(e) {
      var l = document.createElement("li");
      switch(e.type) {
        case "animationstart":
          l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
          break;
        case "animationend":
          l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
          break;
        case "animationiteration":
          l.innerHTML = "New loop started at time " + e.elapsedTime;
          break;
      }
      document.getElementById("output").appendChild(l);
    }

    こちらのコードも、非常に単純です。単純に event.type を見てどのイベントが発生したかを判断して、発生したイベントの記録として、<ul> (順序なしリスト) で適切な情報を出力しています。

    その出力は、最終的に以下のようになります:

    • Started: elapsed time is 0
    • New loop started at time 3.01200008392334
    • New loop started at time 6.00600004196167
    • Ended: elapsed time is 9.234000205993652

    表示された時間が、アニメーションの設定時に指定した時間から予測されるものにとても近く、しかし厳密に一致はしていないことに注意してください。また、最終の繰り返しの後に animationiteration イベントが発生していないことにも注意してください。ただし、animationend イベントは発生しています。

    The HTML

    この例を完成させるために、コンテンツの表示と受信したイベントの情報をスクリプトが挿入するために用いる HTML 文書を以下に掲載します:

    <body onload="setup()">
      <h1 id="watchme">Watch me move</h1>
      <p>This example shows how to use CSS animations to make <code>H1</code> elements
      move across the page.</p>
      <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
      <ul id="output">
      </ul>
    </body>
    

    実際の表示を確認

    関連情報

    Document Tags and Contributors

    Contributors to this page: teoli, ethertank, yyss
    最終更新者: ethertank,