CSS3

プロパティ

animation-name

→● mdn

アニメーションのリストの名前。

animation-name プロパティは、適用されるアニメーションのリストを定義する。その値の中の各 名前は、［アニメーション用のプロパティ値を供する @keyframes at-規則］を選択するために利用される。どの @keyframes at-規則にも合致しない名前に対しては、アニメートされるプロパティは無いので、アニメーションは実行されないことになる。これを、カスケードから生じるアニメーションの上書きに利用できる。複数のアニメーションが、同じプロパティを改変しようと試みている場合、名前がリストの末尾側に最も近いアニメーションが優先される。

名前により挙げられる各アニメーションは、他の各種アニメーション プロパティ（以下の各節に挙げられる）用に，対応する値を持つべきである。他のアニメーション プロパティにあてがわれたカンマで分離された値のリストは、［アニメーションが開始時点に animation-name に与えられているリスト］の長さ L と同じに揃えられるよう，最初の値から対応付けられる：

• リスト の末尾側にある、L 個を超える部分の値は利用されない。
• リスト にあてがわれた値が L 個に満たない場合、ユーザー エージェントは、L 個 の値が得られるまでリストを繰り返す†ことにより、その使用値を算定しなければならない【値が 0 個の場合（全くあてがわれていない場合）、初期値が利用されることになる。】
• この切り捨て／繰り返しは、算出値には影響しない。

注記： これは、background-＊ プロパティのふるまいに相似的になる（ background-image が animation-name の役割に相似的になる）。【参照】

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

none

@keyframes は全く指定されず、アニメーションはない。このアニメーションに指定される他のどのアニメーション プロパティも効果を持たない。

<keyframes-name> ●

アニメーションは、<keyframes-name> に指定された名前の @keyframes を利用する。その様な名前の @keyframes 規則が無ければ、アニメーションも無い。

<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;
 "></DIV>
</DIV>

テスト