From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../detecting_css_animation_support/index.html | 99 ++++++ files/ja/web/css/css_animations/index.html | 85 +++++ files/ja/web/css/css_animations/tips/index.html | 156 +++++++++ .../css_animations/using_css_animations/index.html | 376 +++++++++++++++++++++ 4 files changed, 716 insertions(+) create mode 100644 files/ja/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/ja/web/css/css_animations/index.html create mode 100644 files/ja/web/css/css_animations/tips/index.html create mode 100644 files/ja/web/css/css_animations/using_css_animations/index.html (limited to 'files/ja/web/css/css_animations') diff --git a/files/ja/web/css/css_animations/detecting_css_animation_support/index.html b/files/ja/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..8ef15c0236 --- /dev/null +++ b/files/ja/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,99 @@ +--- +title: CSS アニメーション対応の検出 +slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +tags: + - Advanced + - CSS + - CSS アニメーション + - Guide + - JavaScript + - Junk + - Reference +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +
{{CSSRef}}
+ +

CSS アニメーションでは CSS だけを使用してコンテンツの創造的なアニメーションを行うことができます。しかし、この機能が利用できないことがよくあり、この場合には同様の効果を JavaScript コードで実現したいと思うかもしれません。この記事では、このブログ投稿 (Chris Heilmann 著) に基づいて、これを行うためのテクニックを紹介します。

+ +

CSS アニメーションへの対応の検査

+ +

このコードは、 CSS アニメーション対応があるかどうかをチェックします。

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

最初にいくつかの変数を定義します。アニメーションに対応していないと仮定して、 animation に false を設定します。 animationstring を後で設定するプロパティである animation に設定します。ループ用にブラウザーの接頭辞の配列を生成して、 pfx を空文字列に設定します。

+ +

それから、 CSS の {{cssxref("animation-name")}} プロパティが変数 elem で指定された要素のスタイルコレクションに設定されていることを確認します。これは、ブラウザーが CSS アニメーションを接頭辞なしで対応していることを意味するので、その際は何もしません。

+ +

ブラウザーが接頭辞なしのアニメーションに対応していなければ、 animation はまだ false ですが、主要なブラウザー全てがこのプロパティに接頭辞を付けているので、可能性のある接頭辞をすべて試して、名前が AnimationName に変化するかを調べます。

+ +

このコードの実行が終了したとき、値が false であれば CSS アニメーション対応が有効ではなく、そうでなければ true となります。 true であった場合、 animation プロパティの名前とキーフレームの接頭辞は正しいものになります。よって、新しい Firefox を使用している場合は、プロパティは MozAnimation となってキーフレームの接頭辞は -moz- となり、 Chrome ではそれぞれ WebkitAnimation および -webkit- になります。なお、ブラウザーではキャメルケースとハイフンを簡単に切り替えることはできません。

+ +

様々なブラウザーで正しい構文を使用したアニメーション

+ +

CSS アニメーションに対応しているかどうか分かったところで、アニメーションを行うことができます。

+ +
if( animation === false ) {
+
+  // JavaScript によるアニメーションの代替
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

このコードは animation の値を見ます。もし false ならば、アニメーションを実行するために JavaScript の代替コードを使う必要があることが分かります。そうでなければ、求められる CSS アニメーション効果を生成するために JavaScript を使用することができます。

+ +

animation プロパティの設定は簡単です。単にスタイルコレクションの値を更新するだけです。しかし、 keyframe の追加は、従来の CSS の構文を使用して定義されていないため、より困難です (より柔軟性がありますが、スクリプトの定義がより難しくなります)。

+ +

JavaScript を用いて keyframe を定義するには、それを CSS 文字列に書き出す必要があります。行うことは、 keyframes 変数を設定し、構築されるそれぞれの属性に接頭辞を付けることです。この変数は、いったん構築されれば、一連のアニメーションシーケンスで必要なすべてのキーフレームの完全な記述を含んでいます。

+ +

次の仕事は、ページの CSS に実際にキーフレームを追加することです。最初に行うことは、文書に既にスタイルシートがあるかどうかを確認することです。もしあれば、単にそのスタイルシートにキーフレームの記述を挿入するだけです。これは13-15行目で行っています。

+ +

スタイルシートがないのであれば、新しい {{HTMLElement("style")}} 要素を生成し、その内容をキーフレームの値のセットとします。それから新しい {{HTMLElement("style")}} 要素を文書の {{HTMLElement("head")}} に追加し、それによって新しいスタイルシートが文書に追加されます。/p>

+ +

JSFiddle で見る

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_animations/index.html b/files/ja/web/css/css_animations/index.html new file mode 100644 index 0000000000..e75719617a --- /dev/null +++ b/files/ja/web/css/css_animations/index.html @@ -0,0 +1,85 @@ +--- +title: CSS アニメーション +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS アニメーション + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +
{{CSSRef}}
+ +

CSS アニメーション (CSS Animations) は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。

+ +

リファレンス

+ +

CSS プロパティ

+ +
+ +
+ +

CSS @-規則

+ +
+ +
+ +

ガイド

+ +
+
CSS アニメーション対応の検出
+
ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。
+
CSS アニメーションの使用
+
CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティと @-規則、それに互いにどのように関係するのかを説明します。
+
CSS アニメーションのコツとトリック
+
CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}初回定義
+ +

ブラウザーの対応

+ +

animation プロパティ

+ +
+ + +

{{Compat("css.properties.animation")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_animations/tips/index.html b/files/ja/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..4d2fa03e26 --- /dev/null +++ b/files/ja/web/css/css_animations/tips/index.html @@ -0,0 +1,156 @@ +--- +title: CSS アニメーションのヒントとコツ +slug: Web/CSS/CSS_Animations/Tips +tags: + - CSS + - CSS Animations + - Example + - Guide + - Reference +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{cssref}}
+ +

CSS アニメーションはドキュメントとアプリを構成する要素を使って驚くべき事を行うことを可能にします。 しかしながら、行いたくても理解しやすくないことがあったり、すぐに思いつかないであろう巧妙な方法があります。 この記事は停止したアニメーションをどのように再び実行するのかを含む、あなたの仕事を楽にするかもしれない私達が見つけた秘訣やトリックを集めたものになります。

+ +

再度アニメーションを実行する

+ +

CSS アニメーションの仕様書では再度アニメーションを実行する方法を提示していません。 要素に魔法の関数 resetAnimation() というものはなく、要素の {{cssxref("animation-play-state")}} を再び "running" に設定することさえもできません。その代わりに、停止したアニメーションをリプレイするための巧妙なトリックを使う必要があります。

+ +

ここでの私達が考える停止したアニメーションのリプレイを行う方法はあなたに提案することに対して十分に信頼、安定しています。

+ +

HTML の内容

+ +

はじめに、HTML にアニメーションしてほしい {{HTMLElement("div")}} と、アニメーションを再生(またはリプレイ)するためのボタンを定義しましょう。

+ +
<div class="box">
+</div>
+
+<div class="runButton">Click me to run the animation</div>
+ +

CSS の内容

+ +

次に CSS を使ってアニメーションそのものを定義しましょう。 簡潔さのためにいくつかの重要ではない CSS (”Run” ボタンそのもののスタイル) はここではお見せしません。

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

ここに2つのクラスがあります。 ”box” クラスはアニメーション情報を含まない box の外見の基本的な記述です。 アニメーションの詳細は ”changing” クラスに含まれており、その中で ”colorchange” と名付けられた {{cssxref("@keyframes")}} は box をアニメーションするために2秒間を使うべきだと書いてあります。

+ +

このため、box は所定の位置でアニメーション効果を開始しないので、アニメーションすることはないでしょう。

+ +

JavaScript の内容

+ +

次にアニメーションを行うための JavaScript を見ていきます。 このテクニックの内容は play() 関数にあり、ユーザーが "Run" ボタンをクリックした時に呼ばれます。

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

これは奇妙に見受けられるでしょうか？ 再度アニメーションを実行する唯一の方法はアニメーション効果を取り除くことであるため、あなたが行いたいことをドキュメントに知らせてあげて、ドキュメントにスタイルの再計算させてあげましょう。 その時要素に戻るためのアニメーション効果を追加します。 それを実現するためには、私達は創造的でなければなりません。

+ +

play() 関数が呼び出された時に起きることは以下のものです。

+ +
    +
  1. box の CSS クラスのリストを単純な "box" にリセットします。 これは、その box に現在適用されている他のどのクラスを取り除く効果を持ちます。 これにはアニメーションを扱う "changing" クラスが含まれます。 言い換えると、box からアニメーション効果を取り除きます。 しかしながら、クラスのリストを変更することはそのスタイルの再計算が完了するまで効果を持たず、更新はその変更を反映するために発生し続けます。
    2. +
  2. スタイルが確実に再計算されるように、{{domxref("window.requestAnimationFrame()")}} を使用し、コールバックを指定します。 コールバックは次のドキュメントの再描画の前に適切に実行されます。 問題はそのコールバックの呼び出しが再描画の前であるゆえに、スタイルの再計算はまだ実際に起きてはいないのです。
    3. +
  3. コールバックは巧妙でもう一度 requestAnimationFrame() を呼びます！ 今回は、スタイルの再計算が行われた後の次の再描画の前に、コールバックが実行されます。 このコールバックは box クラスの後ろに "changing" クラスを追加し、そのためクラスを追加したことによる再描画はもう一度要素のアニメーションを始めることでしょう。
    4. +
+ +

もちろん、実際に動作するために "Run" ボタンにイベントハンドラーを追加することは必要です。

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

結果

+ +

{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}

+ +

アニメーションの停止

+ +

単純に、要素に適用した {{cssxref("animation-name")}} を取り除くことはそれの次の状態にジャンプまたは割り込ませます。 代わりに、アニメーションを完了して停止する場合は、別のアプローチを試す必要があります。 主要なトリックは次のものです。

+ +
    +
  1. 可能なら自身を含めるようアニメーションさせること。 これは animation-direction: alternate を信頼するべきではないことを意味します。 代わりに一回の繰り返しの中で完全なアニメーションを経過するキーフレームアニメーションを明示的に書くべきです。
    2. +
  2. JavaScript を使用し、animationiteration イベントが発生した時に使われるアニメーションをクリアーすること。
    3. +
+ +

次のデモは前述の JavaScript テクニックをどのように利用するかを示します。

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +
<h1 id="watchme">Click me to stop</h1>
+
+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

デモ https://jsfiddle.net/morenoh149/5ty5a4oy/

+ +

関連項目

+ + diff --git a/files/ja/web/css/css_animations/using_css_animations/index.html b/files/ja/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..1c38fe8147 --- /dev/null +++ b/files/ja/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,376 @@ +--- +title: CSS アニメーションの使用 +slug: Web/CSS/CSS_Animations/Using_CSS_animations +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{CSSRef}}

+ +

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

+ +

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

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

アニメーションの設定

+ +

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

+ +

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

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

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

+ +

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

+ +

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

+ +

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

+ +

例

+ +
メモ: (2017年以前の) 古いブラウザーでは接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、-webkit 接頭辞を付加したプロパティも含まれています。
+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

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

+ +

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

+ +
<p>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.</p>
+
+ +
+

注: アニメーションを見るにはページを再読み込みするか、 CodePen 環境では CodePen ボタンをクリックしてください。

+
+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

キーフレームの追加

+ +

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

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

コード全体は次のようなものです。

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>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.</p>
+
+ +

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

+ +
+

注: アニメーションを見るにはページを再読み込みするか、 CodePen 環境では CodePen ボタンをクリックしてください。

+
+ +

{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

+ +

アニメーションの繰り返し

+ +

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

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

これを既存のコードの追加してください。

+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>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.</p>
+
+ +

{{EmbedLiveSample("Making_it_repeat","100%","250")}}

+ +

前後の移動

+ +

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

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

そしてコードの残りは次の通りです。

+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +
<p>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.</p>
+
+ +

{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

+ +

animation 一括指定の利用

+ +

{{cssxref("animation")}} 一括指定はスペースの節約に便利です。 例として、この記事を通して使用してきているルールがあります。

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

このように置き換えることができます。

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+
+ +
+

メモ: 詳しくは、 {{cssxref("animation")}} のリファレンスページをご覧ください。

+
+ +

複数のアニメーションプロパティ値の設定

+ +

CSS アニメーションの個別指定値は、コンマで区切って複数の値を受け付けることができます。 — この機能は複数のアニメーションに一つの規則を適用したり、別々なアニメーションに別々の期間、繰り返し回数などを適用したい時に使うことができます。 別々な変化を説明するために、いくつか簡単な例を見てみましょう。

+ +

この例では、三つのアニメーション名を設定していますが、期間と繰り返し回数は1つしか設定していません。 この場合、3つのアニメーションはすべて同じ期間と繰り返し回数になります。

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

第二の例では、三つの値を三つのプロパティ全てに設定しました。この場合、それぞれのアニメーションはそれぞれのプロパティの同じ位置で対応する値で実行されますので、例えば fadeInOut の長さは 2.5s で、繰り返し回数は 2 のようになります。

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

第三の例では、三つのアニメーションが指定されていますが、期間と繰り返し回数は二つしかありません。 この場合、それぞれのアニメーションに個別の値が不足するので、値は最初から最後まで繰り返して使用されます。 ですから例えば、fadeInOut の長さは 2.5s で moveLeft300px の長さは 5s となります。 これで妥当な期間の値の最後に来たので、最初からまた始まります。 — 従って bounce の長さは 2.5s になります。 繰り返し回数 (および指定した他のプロパティ) は、同様に割り当てられます。

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

アニメーションイベントの利用

+ +

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

+ +

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

+ +

CSS の追加

+ +

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

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

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

+ +

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

+ +
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+
+ +

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

+ +

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

+ +

イベントを受け取る

+ +

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

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

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

+ +

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

+ + + +

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

+ +

HTML

+ +

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

+ +
<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>
+
+ +

そしてこちらはライブ出力です。

+ +
+

注: アニメーションを見るにはページを再読み込みするか、 CodePen 環境でアニメーションを見るには CodePen ボタンをクリックしてください。

+
+ +

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf