From 0e952e79c34fc847ce7bda88751d19659bfbb0cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 03:03:42 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation/index.md | 356 +++++++++--------------------------- 1 file changed, 82 insertions(+), 274 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/animation/index.md b/files/ja/web/css/animation/index.md index 876aeab88d..a4f2738eb2 100644 --- a/files/ja/web/css/animation/index.md +++ b/files/ja/web/css/animation/index.md @@ -2,273 +2,114 @@ title: animation slug: Web/CSS/animation tags: - - Animation - CSS - CSS アニメーション - CSS プロパティ - - Reference - - animation-delay - - animation-direction - - animation-duration - - animation-fill-mode - - animation-iteration-count - - animation-name - - animation-play-state - - animation-timing-function + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.animation translation_of: Web/CSS/animation --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の animation 一括指定プロパティは、スタイル間のアニメーションを適用します。これは {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}} の一括指定です。

+**`animation`** は [CSS](/ja/docs/Web/CSS) の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、スタイルの間のアニメーションを適用します。これは {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}} の一括指定です。 -
{{EmbedInteractiveExample("pages/css/animation.html")}}
+{{EmbedInteractiveExample("pages/css/animation.html")}} - - -
/* @keyframes duration | timing-function | delay |
+```css
+/* @keyframes duration | easing-function | delay |
 iteration-count | direction | fill-mode | play-state | name */
 animation: 3s ease-in 1s 2 reverse both paused slidein;
 
-/* @keyframes duration | timing-function | delay | name */
-animation: 3s linear 1s slidein;
-
-/* @keyframes duration | name */
-animation: 3s slidein;
-
- - + - {{cssxref("<single-transition-easing-function>")}} + - {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}} + - {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}} + - {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}} + - {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}} -

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

+- アニメーションの名前は任意で、 `none`, {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}} のいずれかになります。 +- 0 ～ 2 個の {{cssxref("<time>")}} の値 -

アニメーションできるプロパティの説明があります。この説明は言うまでもなく CSS トランジションにも有効です。

+各アニメーションの定義の中での順序は重要です。{{cssxref("<time>")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。 -

{{cssinfo}}

+順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。 -

構文

+### 値 -

animation プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。

+- `` + - : アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。 +- `` + - : アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。 +- `` + - : アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。 +- `` + - : アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。 -

それぞれ個別のアニメーションは以下のように定義されます。

+## アクセシビリティの考慮 -
    -
  • 以下の値は0～1回出現します。 -
      -
    • {{cssxref("<single-transition-timing-function>")}}
      • -
    • {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}
      • -
    • {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}
      • -
    • {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}
      • -
    • {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}}
      • -
    -
    • -
  • アニメーションの名前は任意で、 none, {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}} のいずれかになります。
    • -
  • 0～2回の {{cssxref("<time>")}} の値
    • -
+点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。 -

各アニメーションの定義の中での順序は重要です。{{cssxref("<time>")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。

+アニメーションを停止したり無効にしたりする仕組みを、できれば[動きを縮小するメディアクエリー](/ja/docs/Web/CSS/@media/prefers-reduced-motion)を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。 -

順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。

+- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity) +- [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) +- [MDN Understanding WCAG, Guideline 2.2 explanations](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content) +- [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) -

値

+## 公式定義 -
-
<single-animation-iteration-count>
-
アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。
-
<single-animation-direction>
-
アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。
-
<single-animation-fill-mode>
-
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。
-
<single-animation-play-state>
-
アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。
-
+{{cssinfo}} -

構文形式

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

例

+## 例 -

台風の目

+### 台風の目 -
<div class="view_port">
-  <div class="polling_message">
+```html
+

+  

     Listening for dispatches
-  </div>
-  <div class="cylon_eye"></div>
-</div>
-
+ +
+ +``` -
.polling_message {
+```css
+.polling_message {
   color: white;
   float: left;
   margin-right: 2%;
@@ -297,60 +138,27 @@ button.restart {
 
 @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
         @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
-
- -

{{EmbedLiveSample('Cylon_Eye')}}

- -

これ以外の例は CSS アニメーションを参照してください。

- -

アクセシビリティの考慮事項

- -

点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。

+``` -

アニメーションを停止したり無効にしたりする仕組みを、できれば Reduced Motion Media Query を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。

+{{EmbedLiveSample('Cylon_Eye')}} - +これ以外の例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 -

仕様書

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

ブラウザーの対応

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

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

+{{Compat}} -

Quantum CSS のメモ

+### Quantum CSS のメモ -
    -
  • Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります ({{bug(1383239)}})。これは Firefox の新しい並列 CSS エンジン（Quantum CSS または Stylo と呼ばれており、 Firefox 57 でリリースする計画です）で修正されています。
    • -
  • 他の Gecko のバグとして、 {{htmlelement("details")}} 要素が open 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります ({{bug(1382124)}})。 Quantum CSS では修正されています。
    • -
  • さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の {{cssxref("font-size")}} を変更しても影響されないというものがあります ({{bug(1254424)}})。 Quantum CSS では修正されています。
    • -
+- Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります ({{bug(1383239)}})。これは Firefox の新しい並列 CSS エンジン（[Quantum CSS](https://wiki.mozilla.org/Quantum) または [Stylo](https://wiki.mozilla.org/Quantum/Stylo) と呼ばれており、 Firefox 57 でリリースする計画です）で修正されています。 +- 他の Gecko のバグとして、 {{htmlelement("details")}} 要素が `open` 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります ({{bug(1382124)}})。 Quantum CSS では修正されています。 +- さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の {{cssxref("font-size")}} を変更しても影響されないというものがあります ({{bug(1254424)}})。 Quantum CSS では修正されています。 -

関連情報

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