From edfbe828a27e4d69b232c86a766d482a0f62d722 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jan 2022 23:15:36 +0900 Subject: 2022/01/22 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-name/index.md | 120 +++++++++++++++++-------------- 1 file changed, 68 insertions(+), 52 deletions(-) (limited to 'files/ja/web/css/animation-name') diff --git a/files/ja/web/css/animation-name/index.md b/files/ja/web/css/animation-name/index.md index 2f51166bda..4c1652fd36 100644 --- a/files/ja/web/css/animation-name/index.md +++ b/files/ja/web/css/animation-name/index.md @@ -5,22 +5,23 @@ tags: - CSS - CSS アニメーション - CSS プロパティ - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.animation-name translation_of: Web/CSS/animation-name --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の animation-name プロパティは、要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する {{cssxref("@keyframes")}} @-規則を設定します。

+**`animation-name`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に適用される 1 つまたは複数のアニメーションを記述する {{cssxref("@keyframes")}} アットルールの名前を指定します。 -
{{EmbedInteractiveExample("pages/css/animation-name.html")}}
+{{EmbedInteractiveExample("pages/css/animation-name.html")}} - +アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。 -

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。

+## 構文 -

構文

- -
/* 単一のアニメーション */
+```css
+/* 単一のアニメーション */
 animation-name: none;
 animation-name: test_05;
 animation-name: -specific;
@@ -31,61 +32,76 @@ animation-name: test1, animation4;
 animation-name: none, -moz-specific, sliding;
 
 /* グローバル値 */
-animation-name: initial
-animation-name: inherit
-animation-name: unset
+animation-name: initial; +animation-name: inherit; +animation-name: revert; +animation-name: unset; +``` + +### 値 + +- `none` + - : キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。 +- {{cssxref("<custom-ident>")}} + - : アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 `a` から `z`、 数字 `0` から `9`、 アンダースコア (`_`)、 ダッシュ (`-`) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は `none`, `unset`, `initial`, `inherit` であってはなりません。 -

値

+> **Note:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)を参照してください。 -
-
none
-
キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。
-
{{cssxref("<custom-ident>")}}
-
アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 a から z、 数字 0 から 9、 アンダースコア (_)、 ダッシュ (-) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は none, unset, initial, inherit であってはなりません。
-
+## 公式定義 -
-

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。

-
+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 + +### animation-name が rotate であるアニメーション + +#### HTML + +```html +
+``` + +#### CSS + +```css +.box { + background-color: rebeccapurple; + border-radius: 10px; + width: 100px; + height: 100px; + animation-name: rotate; + animation-duration: 0.7s; +} + +@keyframes rotate { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} +``` + +#### 結果 -

CSS アニメーションを参照してください。

+{{EmbedLiveSample("Examples","100%","250")}} -

仕様書

+例については[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -
-

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

-
+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- JavaScript {{domxref("AnimationEvent")}} API -- cgit v1.2.3-54-g00ecf