CSS3

プロパティ

animation

→● mdn

アニメーション： 略式プロパティ。

animation 略式プロパティは、カンマで分離されたアニメーション定義のリストである。リスト内の各項目は、そのすべての下位プロパティの、それぞれに対する値を与える。これらの下位プロパティは、アニメーション プロパティ とも総称される。（ animation 略式プロパティのみを用いて定義したときには生じることはないが、これらの下位プロパティが与えるリストの長さが互いに異なるときにどうなるかについては、animation-name の定義を見よ。）

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

<single-animation>

＝（animation-duration用）
||
|| （animation-delay用）
|| <single-animation-iteration-count>
|| <single-animation-direction>
|| <single-animation-fill-mode>
|| <single-animation-play-state>
|| [none | <keyframes-name>]

<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:3s linear 5s Test;
 "></DIV>
</DIV>

各アニメーション定義の中の順序は重要であることに注意： 各 <single-animation> 内において、<time> に構文解析し得る値のうち、1 個目の値が animation-duration にあてがわれ、2 個目の値が animation-delay にあてがわれる。

各アニメーション定義の中での順序は、<keyframes-name> 値を他のキーワードと判別するためにも重要になることに注意。構文解析時には、［ animation-name 以外のプロパティに妥当なキーワードであって、値がこの略式プロパティの中でより前に現れていないもの］は、animation-name に対するものではなく、それらのプロパティに対するものとして受容されなければならない。更に、直列化する際には、それらのプロパティの既定値は、少なくとも、別のプロパティの値にもなり得る animation-name を判別できるように出力されなければならず、また、その必要がなくとも追加で出力されてもよい。

テスト