CSS3

：

プロパティ

：

animation-timeline

　 編集：2022.07.14 by T.A.

[Edge]⛌。→● mdn mdn(en)

アニメーションとともに利用される時列線を定義する¶未定義。

名前 animation-timeline
値 <single-animation-timeline>#
初期値 auto
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 リスト ― 各アイテムは、次のいずれかを与える：
CSS 識別子（文字大小区別）／ キーワード none ／ キーワード auto
正準的順序 文法に従う
アニメーション型 アニメート不可

animation-timeline プロパティは、［animation-name、animation-duration］の様なプロパティに類似する： それは、1 個以上の値をとり、各値は、時列線 ― § animation-name プロパティ に述べられるように当のアニメーションに合致しておかれたそれ ― で、当の要素上の対応する Animation に追加のふるまいを授ける。

以下のCSSが組み込んであります：

<single-animation-timeline>
＝auto | none | <timeline-name>
auto
当のアニメーションの時列線は、DocumentTimeline ― より具体的には、既定の文書時列線 ― になる。
none
当のアニメーションには、時列線は結び付けられない。
<timeline-name>
＝ <custom-ident> | <string>

所与の <timeline-name> に名前が合致している時列線 at-規則【まだ定義されていない用語のようだ】が存在する場合、当のアニメーションの時列線は、［それらのうち文書順序で最後のもの］で定義される時列線になる。他の場合、当のアニメーションには、時列線は結び付けられない。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-timeline:Test,Test2;
 "></DIV>
</DIV>

¶課題を省く

テスト
別画面に表示させて。
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：