2022/02/03 時点の英語版に基づき新規翻訳

1 files changed, 120 insertions, 0 deletions

diff --git a/files/ja/web/css/animation-timeline/index.md b/files/ja/web/css/animation-timeline/index.md
new file mode 100644
index 0000000000..1058e73a91
--- /dev/null
+++ b/files/ja/web/css/animation-timeline/index.md
@@ -0,0 +1,120 @@
+---
+title: animation-timeline
+slug: Web/CSS/animation-timeline
+tags:
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.animation-timeline
+translation_of: Web/CSS/animation-timeline
+---
+{{CSSRef}}
+
+**`animation-timeline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、この要素に適用されるスクロールアニメーションを記述する 1 つ以上の {{cssxref("@scroll-timeline")}} アットルールの名前を指定します。
+
+<!-- {{EmbedInteractiveExample("pages/css/animation-name.html")}} -->
+
+ふつうはすべてのアニメーションプロパティを一度に設定する一括指定プロパティの {{cssxref("animation")}} を使用したほうが便利です。
+
+## 構文
+
+```css
+/* 単一のアニメーション */
+animation-timeline: none;
+animation-timeline: test_05;
+animation-timeline: -specific;
+animation-timeline: sliding-vertically;
+
+/* 複数のアニメーション */
+animation-timeline: test1, animation4;
+animation-timeline: none, -moz-specific, sliding;
+
+/* グローバル値 */
+animation-timeline: initial;
+animation-timeline: inherit;
+animation-timeline: revert;
+animation-timeline: unset;
+```
+
+### 値
+
+- `auto`
+  - : アニメーションのタイムラインはこの文書の既定の [DocumentTimeline](/ja/docs/Web/API/DocumentTimeline) です。
+- `none`
+  - : アニメーションはタイムラインに関連付けられません。
+- `<timeline-name>`
+  - : スクロールタイムラインを識別する {{cssxref('custom-ident')}} または文字列で、 {{cssxref('@scroll-timeline')}} ルールで宣言されているものです。 2 つ以上のスクロールタイムラインが同じ名前であった場合、カスケード中で最後に宣言されたものが使用されます。一致するスクロールタイムラインがなければ、アニメーションはタイムラインに関連付けられません。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### 単純な例
+
+`squareTimeline` という名前のスクロールタイムラインが宣言されており、 `#square` 要素に `animation-timeline: squareTimeline` を用いて適用されています。
+
+#### HTML
+
+```html
+<div id="container">
+  <div id="square"></div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  height: 300px;
+}
+
+#square {
+  background-color: deeppink;
+  width: 100px; height: 100px;
+  margin-top: 100px;
+  animation-name: rotateAnimation;
+  animation-duration: 3s;
+  animation-direction: alternate;
+  animation-timeline: squareTimeline;
+}
+
+@scroll-timeline squareTimeline {
+  source: selector('#container');
+  orientation: "vertical";
+  scroll-offsets:  0px, 300px;
+}
+
+@keyframes rotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Simple example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+- [@scroll-timeline アットルール](/ja/docs/Web/CSS/@scroll-timeline)