diff options
| -rw-r--r-- | files/ja/web/css/css_animations/tips/index.md | 125 |
1 files changed, 65 insertions, 60 deletions
diff --git a/files/ja/web/css/css_animations/tips/index.md b/files/ja/web/css/css_animations/tips/index.md index 4d2fa03e26..a9154a60ee 100644 --- a/files/ja/web/css/css_animations/tips/index.md +++ b/files/ja/web/css/css_animations/tips/index.md @@ -3,37 +3,39 @@ title: CSS アニメーションのヒントとコツ slug: Web/CSS/CSS_Animations/Tips tags: - CSS - - CSS Animations - - Example - - Guide - - Reference + - CSS アニメーション + - 例 + - ガイド + - リファレンス translation_of: Web/CSS/CSS_Animations/Tips --- -<div>{{cssref}}</div> +{{CSSRef}} -<p><span class="seoSummary">CSS アニメーションはドキュメントとアプリを構成する要素を使って驚くべき事を行うことを可能にします。 しかしながら、行いたくても理解しやすくないことがあったり、すぐに思いつかないであろう巧妙な方法があります。 この記事は停止したアニメーションをどのように再び実行するのかを含む、あなたの仕事を楽にするかもしれない私達が見つけた秘訣やトリックを集めたものになります。</span></p> +CSS アニメーションを使えば、文書やアプリを構成する要素に、驚くようなことができるようになります。しかし、当たり前のようで当たり前でないことや、すぐには思いつかないような賢い方法があるかもしれません。この記事では、止まってしまったアニメーションを再び動かす方法など、作業を楽にするために見つけたヒントをまとめています。 -<h2 id="Run_an_animation_again" name="Run_an_animation_again">再度アニメーションを実行する</h2> +## 再度アニメーションを実行する -<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>の仕様書では再度アニメーションを実行する方法を提示していません。 要素に魔法の関数 <code>resetAnimation()</code> というものはなく、要素の {{cssxref("animation-play-state")}} を再び <code>"running"</code> に設定することさえもできません。その代わりに、停止したアニメーションをリプレイするための巧妙なトリックを使う必要があります。</p> +[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)の仕様書では再度アニメーションを実行する方法を提示していません。 要素に魔法の関数 `resetAnimation()` というものはなく、要素の {{cssxref("animation-play-state")}} を再び `"running"` に設定することさえもできません。その代わりに、停止したアニメーションをリプレイするための巧妙なトリックを使う必要があります。 -<p>ここでの私達が考える停止したアニメーションのリプレイを行う方法はあなたに提案することに対して十分に信頼、安定しています。</p> +ここでは、私たちが安定していて信頼性があると感じている方法をご紹介します。 -<h3 id="HTML_content" name="HTML_content">HTML の内容</h3> +### HTML の内容 -<p>はじめに、HTML にアニメーションしてほしい {{HTMLElement("div")}} と、アニメーションを再生(またはリプレイ)するためのボタンを定義しましょう。</p> +はじめに、HTML にアニメーションしてほしい {{HTMLElement("div")}} と、アニメーションを再生 (またはリプレイ) するためのボタンを定義しましょう。 -<pre class="brush: html"><div class="box"> -</div> +```html +<div class="box"> +</div> -<div class="runButton">Click me to run the animation</div></pre> +<div class="runButton">Click me to run the animation</div> +``` -<h3 id="CSS_content" name="CSS_content">CSS の内容</h3> +### CSS の内容 -<p>次に CSS を使ってアニメーションそのものを定義しましょう。 簡潔さのためにいくつかの重要ではない CSS (”Run” ボタンそのもののスタイル) はここではお見せしません。</p> +次に CSS を使ってアニメーションそのものを定義しましょう。 簡潔さのためにいくつかの重要ではない CSS ("Run" ボタンそのもののスタイル) はここではお見せしません。 -<div class="hidden"> -<pre class="brush: css">.runButton { +```css hidden +.runButton { cursor: pointer; width: 300px; border: 1px solid black; @@ -45,10 +47,11 @@ translation_of: Web/CSS/CSS_Animations/Tips color: white; background-color: darkgreen; font: 14px "Open Sans", "Arial", sans-serif; -}</pre> -</div> +} +``` -<pre class="brush: css">@keyframes colorchange { +```css +@keyframes colorchange { 0% { background: yellow } 100% { background: blue } } @@ -61,55 +64,57 @@ translation_of: Web/CSS/CSS_Animations/Tips .changing { animation: colorchange 2s; -}</pre> +} +``` -<p>ここに2つのクラスがあります。 <code>”box”</code> クラスはアニメーション情報を含まない box の外見の基本的な記述です。 アニメーションの詳細は <code>”changing”</code> クラスに含まれており、その中で <code>”colorchange”</code> と名付けられた {{cssxref("@keyframes")}} は box をアニメーションするために2秒間を使うべきだと書いてあります。</p> +ここに 2 つのクラスがあります。 `"box"` ボックスの外観に関する基本的な記述で、アニメーションの情報は含まれていません。アニメーションの詳細は `"changing"` クラスに含まれており、その中で `"colorchange"` と名付けられた {{cssxref("@keyframes")}} という名前の `"colorchange"` が 2 秒間に渡ってボックスをアニメーションさせるために使用されるべきであることを述べています。 -<p>このため、box は所定の位置でアニメーション効果を開始しないので、アニメーションすることはないでしょう。</p> +このため、ボックスは所定の位置でアニメーション効果を開始しないので、アニメーションすることはないでしょう。 -<h3 id="JavaScript_content" name="JavaScript_content">JavaScript の内容</h3> +### JavaScript の内容 -<p>次にアニメーションを行うための JavaScript を見ていきます。 このテクニックの内容は <code>play()</code> 関数にあり、ユーザーが "Run" ボタンをクリックした時に呼ばれます。</p> +次にアニメーションを行うための JavaScript を見ていきます。 このテクニックの内容は `play()` 関数にあり、ユーザーが "Run" ボタンをクリックした時に呼ばれます。 -<pre class="brush: js">function play() { +```js +function play() { document.querySelector(".box").className = "box"; window.requestAnimationFrame(function(time) { window.requestAnimationFrame(function(time) { document.querySelector(".box").className = "box changing"; }); }); -}</pre> +} +``` -<p>これは奇妙に見受けられるでしょうか？ 再度アニメーションを実行する唯一の方法はアニメーション効果を取り除くことであるため、あなたが行いたいことをドキュメントに知らせてあげて、ドキュメントにスタイルの再計算させてあげましょう。 その時要素に戻るためのアニメーション効果を追加します。 それを実現するためには、私達は創造的でなければなりません。</p> +これは奇妙だと思いませんか？なぜなら、アニメーションを再び再生する唯一の方法は、アニメーション効果を削除し、それを認識するために文書がスタイルを再計算してから、アニメーション効果を要素に追加することだからです。これを実現するには、工夫が必要です。 -<p><code>play()</code> 関数が呼び出された時に起きることは以下のものです。</p> +`play()` 関数が呼び出された時に起きることは次の通りです。 -<ol> - <li>box の CSS クラスのリストを単純な <code>"box"</code> にリセットします。 これは、その box に現在適用されている他のどのクラスを取り除く効果を持ちます。 これにはアニメーションを扱う <code>"changing"</code> クラスが含まれます。 言い換えると、box からアニメーション効果を取り除きます。 しかしながら、クラスのリストを変更することはそのスタイルの再計算が完了するまで効果を持たず、更新はその変更を反映するために発生し続けます。</li> - <li>スタイルが確実に再計算されるように、{{domxref("window.requestAnimationFrame()")}} を使用し、コールバックを指定します。 コールバックは次のドキュメントの再描画の前に適切に実行されます。 問題はそのコールバックの呼び出しが再描画の前であるゆえに、スタイルの再計算はまだ実際に起きてはいないのです。</li> - <li>コールバックは巧妙でもう一度 <code>requestAnimationFrame()</code> を呼びます！ 今回は、スタイルの再計算が行われた後の次の再描画の前に、コールバックが実行されます。 このコールバックは box クラスの後ろに <code>"changing"</code> クラスを追加し、そのためクラスを追加したことによる再描画はもう一度要素のアニメーションを始めることでしょう。</li> -</ol> +1. box の CSS クラスのリストを単純な `"box"` にリセットします。 これは、その box に現在適用されている他のどのクラスを取り除く効果を持ちます。 これにはアニメーションを扱う `"changing"` クラスが含まれます。 言い換えると、ボックスからアニメーション効果を取り除きます。 しかし、クラスのリストを変更することはそのスタイルの再計算が完了するまで効果を持たず、更新はその変更を反映するために発生し続けます。 +2. スタイルが確実に再計算されるように、{{domxref("window.requestAnimationFrame()")}} を使用し、コールバックを指定します。このコールバックは、文書の次の再描画の直前に実行されます。問題は、再描画の前なので、スタイルの再計算がまだ行われていないということです。 +3. このコールバックは、巧妙に `requestAnimationFrame()` を 2 回目に呼び出しています。今回のコールバックは、スタイルの再計算が行われた後の、次の再描画の前に実行されます。このコールバックは、ボックスに `"changing"` クラスを追加し、再描画で再びアニメーションを開始するようにしています。 -<p>もちろん、実際に動作するために "Run" ボタンにイベントハンドラーを追加することは必要です。</p> +もちろん、実際に動作するために "Run" ボタンにイベントハンドラーを追加する必要があります。 -<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre> +```js +document.querySelector(".runButton").addEventListener("click", play, false); +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p> +{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }} -<h2 id="Stopping_an_animation" name="Stopping_an_animation">アニメーションの停止</h2> +## アニメーションの停止 -<p>単純に、要素に適用した {{cssxref("animation-name")}} を取り除くことはそれの次の状態にジャンプまたは割り込ませます。 代わりに、アニメーションを完了して停止する場合は、別のアプローチを試す必要があります。 主要なトリックは次のものです。</p> +要素に適用されている {{cssxref("animation-name")}} を削除すると、その要素は次の状態にジャンプまたはカットします。しかし、アニメーションを完了させてから停止させたい場合は、別の方法を取らなければなりません。主なトリックは以下の通りです。 -<ol> - <li>可能なら自身を含めるようアニメーションさせること。 これは <code>animation-direction: alternate</code> を信頼するべきではないことを意味します。 代わりに一回の繰り返しの中で完全なアニメーションを経過するキーフレームアニメーションを明示的に書くべきです。</li> - <li>JavaScript を使用し、<code>animationiteration</code> イベントが発生した時に使われるアニメーションをクリアーすること。</li> -</ol> +1. 可能なら自身を含めるようアニメーションさせること。 これは `animation-direction: alternate` を信頼するべきではないことを意味します。 代わりに一回の繰り返しの中で完全なアニメーションを経過するキーフレームアニメーションを明示的に書くべきです。 +2. JavaScript を使用し、`animationiteration` イベントが発生した時に使われるアニメーションをクリアーすること。 -<p>次のデモは前述の JavaScript テクニックをどのように利用するかを示します。</p> +次のデモは前述の JavaScript テクニックをどのように利用するかを示します。 -<pre class="brush: css">.slidein { +```css +.slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-count: infinite; @@ -130,27 +135,27 @@ translation_of: Web/CSS/CSS_Animations/Tips margin-left: 0%; } } -</pre> +``` -<pre class="brush: html"><h1 id="watchme">Click me to stop</h1> -</pre> +```html +<h1 id="watchme">Click me to stop</h1> +``` -<pre class="brush: js">let watchme = document.getElementById('watchme') +```js +let watchme = document.getElementById('watchme') watchme.className = 'slidein' -const listener = (e) => { +const listener = (e) => { watchme.className = 'slidein stopped' } -watchme.addEventListener('click', () => +watchme.addEventListener('click', () => watchme.addEventListener('animationiteration', listener, false) ) -</pre> +``` -<p>デモ <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p> +デモ <https://jsfiddle.net/morenoh149/5ty5a4oy/> -<h2 id="See_also" name="See_also">関連項目</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions">CSS トランジッションの使用</a></li> - <li>{{domxref("Window.requestAnimationFrame()")}}</li> -</ul> +- [CSS トランジションの使用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- {{domxref("Window.requestAnimationFrame()")}} |