diff options
| -rw-r--r-- | files/ja/web/css/@keyframes/index.md | 138 |
1 files changed, 64 insertions, 74 deletions
diff --git a/files/ja/web/css/@keyframes/index.md b/files/ja/web/css/@keyframes/index.md index 7d56c3104e..3a1480db3a 100644 --- a/files/ja/web/css/@keyframes/index.md +++ b/files/ja/web/css/@keyframes/index.md @@ -2,18 +2,21 @@ title: '@keyframes' slug: Web/CSS/@keyframes tags: - - '@-規則' - - CSS - - CSS アニメーション - - Reference - アニメーション + - アットルール + - CSS + - リファレンス +browser-compat: css.at-rules.keyframes translation_of: Web/CSS/@keyframes --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +**`@keyframes`** は CSS の[アットルール](/ja/docs/Web/CSS/At-rule)で、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップを[トランジション](/ja/docs/Web/CSS/CSS_Transitions)よりも詳細に制御できます。 -<p><span class="seoSummary">CSS の <strong><code>@keyframes</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。</span>これにより、アニメーションの中間ステップを <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>よりも詳細に制御できます。</p> +## 構文 -<pre class="brush: css no-line-numbers">@keyframes slidein { +```css +@keyframes slidein { from { transform: translateX(0%); } @@ -21,61 +24,78 @@ translation_of: Web/CSS/@keyframes to { transform: translateX(100%); } -}</pre> +} +``` + +### 値 + +- {{cssxref("custom-ident")}} + - : キーフレームのリストを識別する名前。これは CSS 構文で定義されている識別子に適合する必要があります。 +- `from` + - : アニメーションの始まりである `0%` を示します。 +- `to` + - : アニメーションの終わりである `100%` を示します。 +- {{cssxref("<percentage>")}} + - : 指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。 -<p>JavaScript は、 CSS オブジェクトモデルのインターフェイス {{domxref("CSSKeyframesRule")}} によって <code>@keyframes</code> @-規則にアクセスできます。</p> +## 解説 -<p>キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 {{ cssxref("animation-name") }} プロパティで指定したものと同じ名前がついた <code>@keyframes</code> 規則を作成します。それぞれの <code>@keyframes</code> 規則は、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。</p> +JavaScript は、 CSS オブジェクトモデルのインターフェイス {{domxref("CSSKeyframesRule")}} によって `@keyframes` アットルールにアクセスできます。 -<p>キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。</p> +キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 {{ cssxref("animation-name") }} プロパティで指定したものと同じ名前がついた `@keyframes` ルールを作成します。それぞれの `@keyframes` ルールは、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。 -<h3 id="Valid_keyframe_lists" name="Valid_keyframe_lists">有効なキーフレームのリスト</h3> +キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。 -<p>キーフレーム規則にアニメーションの開始と終了の状態 (<code>0%</code>/<code>from</code> と <code>100%</code>/<code>to</code>) を明示しない場合、ブラウザはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。</p> +### 有効なキーフレームのリスト -<p>キーフレーム規則にアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。</p> +キーフレームルールにアニメーションの開始と終了の状態 (`0%`/`from` と `100%`/`to`) を明示しない場合、ブラウザーはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。 -<h3 id="Resolving_duplicates" name="Resolving_duplicates">重複の解決</h3> +キーフレームルールにアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。 -<p>複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 <code>@keyframes</code> 規則がカスケード的に継承されることはないため、アニメーションが複数の規則セットによるキーフレームをもとにして行われることはありません。</p> +### 重複の解決 -<p>指定されたアニメーションのタイムオフセットが重複している場合は、 <code>@keyframes</code> 規則内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 <code>@keyframes</code> 規則の中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。</p> +複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 `@keyframes` ルールがカスケード的に継承されることはないため、アニメーションが複数のルールセットによるキーフレームをもとにして行われることはありません。 -<h3 id="When_properties_are_left_out_of_some_keyframes" name="When_properties_are_left_out_of_some_keyframes">一部のキーフレームでプロパティが指定されていない場合</h3> +指定されたアニメーションのタイムオフセットが重複している場合は、 `@keyframes` ルール内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 `@keyframes` ルールの中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。 -<p>一部のキーフレームでしか指定されていないプロパティは、補完されます (ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません)。例えば:</p> +### 一部のキーフレームでプロパティが指定されていない場合 -<pre class="brush: css">@keyframes identifier { +一部のキーフレームでしか指定されていないプロパティは、補完されます（ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません）。 + +```css +@keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } -</pre> +``` -<p>この例では、 {{ cssxref("top") }} プロパティは <code>0%</code>, <code>30%</code>, <code>100%</code> のキーフレームでアニメーション指定されています。また、 {{ cssxref("left") }} プロパティは <code>0%</code>, <code>68%</code>, <code>72%</code>, <code>100%</code> のキーフレームで指定されています。</p> +この例では、 {{ cssxref("top") }} プロパティは `0%`, `30%`, `100%` のキーフレームでアニメーション指定されています。また、 {{ cssxref("left") }} プロパティは `0%`, `68%`, `72%`, `100%` のキーフレームで指定されています。 -<h3 id="キーフレームが複数宣言された場合">キーフレームが複数宣言された場合</h3> +### キーフレームが複数宣言された場合 -<p>キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、</p> +キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、 -<pre class="brush: css">@keyframes identifier { +```css +@keyframes identifier { 0% { top: 0; } 50% { top: 30px; left: 20px; } 50% { top: 10px; } 100% { top: 0; } } -</pre> +``` -<p>この例では、 <code>50%</code> のキーフレームで、使用される値は <code>top: 10px</code> と <code>left: 20px</code> です。</p> +この例では、 `50%` のキーフレームで、使用される値は `top: 10px` と `left: 20px` です。 -<p>カスケード的なキーフレームは Firefox 14 から対応しています。</p> +カスケード的なキーフレームは Firefox 14 から対応しています。 -<h3 id="!important_in_a_keyframe" name="!important_in_a_keyframe">キーフレーム内の <code>!important</code></h3> +### キーフレーム内の `!important` -<p>キーフレーム内で <code>!important</code> が付けられた宣言は無視されます。</p> +キーフレーム内で `!important` が付けられた宣言は無視されます。 -<pre class="brush: css">@keyframes important1 { +```css +@keyframes important1 { from { margin-top: 50px; } 50% { margin-top: 150px !important; } /* 無視される */ to { margin-top: 100px; } @@ -87,57 +107,27 @@ translation_of: Web/CSS/@keyframes to { margin-top: 150px !important; /* 無視される */ margin-bottom: 50px; } } -</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> +``` -<dl> - <dt>{{cssxref("custom-ident")}}</dt> - <dd>キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。</dd> - <dt><code>from</code></dt> - <dd>アニメーションの始まりである <code>0%</code> を示します。</dd> - <dt><code>to</code></dt> - <dd>アニメーションの終わりである <code>100%</code> を示します。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +### CSS アニメーションの例 -<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの利用</a> を参照してください。</p> +[CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td> - <td>{{ Spec2('CSS3 Animations') }}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.at-rules.keyframes")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> - <li>{{domxref("AnimationEvent")}}</li> -</ul> +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- {{domxref("AnimationEvent")}} |