Revision 1133135 of CSS アニメーション

<p><span class="diff_add">{{SeeCompatTable}}{{CSSRef}}</span></p>

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

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

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

<h2 id="Configuring_the_animation" name="Configuring_the_animation">アニメーションの設定</h2>

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

<p>{{cssxref("animation")}} プロパティのサブプロパティは以下のとおりです:</p>

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

<h2 id="Defining_the_animation_sequence_using_keyframes" name="Defining_the_animation_sequence_using_keyframes">キーフレームを用いたアニメーションの流れの定義</h2>

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

<p>CSS スタイルでアニメーションのタイミングを定義するため、キーフレームを {{cssxref("percentage")}} で指定し、アニメーションの流れの中でいつそのスタイルが適用されるかを示します。0% はアニメーションの始点、100% はアニメーションが終点を表します。これら始点と終点はとても重要なため、それぞれ、0% は <code>from</code>、100% は <code>to</code> の別名でも代替できます。両者の指定は任意ですが、<code>from</code>/<code>0%</code> と <code>to</code>/<code>100%</code> の両方が指定されていない場合、ブラウザは、すべての属性から計算された値を用いてアニメーションを開始または終了します。</p>

<p>また、任意でアニメーションの始まりと終わりの中間地点を定義する追加のキーフレームを含めることも可能です。</p>

<h2 id="Examples" name="Examples">例</h2>

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

<h3 id="文字列がブラウザのウィンドウを横切る">文字列がブラウザのウィンドウを横切る</h3>

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

<p>このようなアニメーションは、ページ幅がブラウザウィンドウの幅よりも広くなる原因になるので注意してください。これは、アニメーションする要素をコンテナ内に置き、そのコンテナのスタイルに {{cssxref("overflow")}}<code>:hidden</code> を指定することで回避できます。</p>

<pre class="brush: css">
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}</pre>

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

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

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

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

<pre class="brush: html">
&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample("文字列がブラウザのウィンドウを横切る","100%","250")}}</p>

<h3 id="キーフレームを追加する">キーフレームを追加する</h3>

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

<pre class="brush: css">
75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}</pre>

<pre class="brush: css hidden">
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</pre>

<pre class="brush: html hidden">
&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

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

<p>{{EmbedLiveSample("キーフレームを追加する","100%","250")}}</p>

<h3 id="アニメーションを繰り返す">アニメーションを繰り返す</h3>

<p>アニメーションを繰り返すためには {{cssxref("animation-iteration-count")}} を用いて、アニメーションを何回繰り返すかを設定します。以下の例では、<code>infinite</code> を指定してアニメーションを無期限に繰り返します:</p>

<pre class="brush: css">
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
</pre>

<pre class="brush: css hidden">
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</pre>

<pre class="brush: html hidden">
&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample("アニメーションを繰り返す","100%","250")}}</p>

<h3 id="前後に移動させる">前後に移動させる</h3>

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

<pre class="brush: css">
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</pre>

<pre class="brush: css hidden">
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</pre>

<pre class="brush: html hidden">
&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample("前後に移動させる","100%","250")}}</p>

<h3 id="Using_animation_events" name="Using_animation_events">アニメーションイベントを使う</h3>

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

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

<h4 id="Adding_the_CSS" name="Adding_the_CSS">CSS を追加する</h4>

<p>アニメーションの CSS を作成することから始めます。このアニメーションは、"slidein" が呼び出されて 3 秒後に終わり、3 回繰り返されます。繰り返すたびに、逆方向へアニメーションします。{{ cssxref("@keyframes") }} 内で、要素が画面を横切るようにするため、width と margin-left を操作します。</p>

<pre class="brush: css">
.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
    
@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
      
  to {
    margin-left:0%;
    width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}</pre>

<h4 id="Adding_the_animation_event_listeners" name="Adding_the_animation_event_listeners">アニメーションイベントのリスナーを追加する</h4>

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

<pre class="brush: js">
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";
}
</pre>

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

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

<h4 id="Receiving_the_events" name="Receiving_the_events">イベントを受け取る</h4>

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

<pre class="brush: js">
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);
}</pre>

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

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

<ul>
 <li>Started: elapsed time is 0</li>
 <li>New loop started at time 3.01200008392334</li>
 <li>New loop started at time 6.00600004196167</li>
 <li>Ended: elapsed time is 9.234000205993652</li>
</ul>

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

<h4 id="The_HTML">The HTML</h4>

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

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

<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
 <li><a href="/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
</ul>