CSS

animationの一括指定プロパティを使おう

animation関連のプロパティを一括で指定する方法を見ていきます。

  • animationの一括指定プロパティ
  • 時間に関する注意

animationの一括指定プロパティ

・一括プロパティでも指定ができます。animation という一括指定プロパティを使ってあげましょう。

・今まで指定してきた値を順不同かつ省略可で並べていけばいいので、たとえば、 animation: animation 3s infinite; としてあげればanimationと名前のついた@keyframesを3秒間かけて変化させそれをずっと続けるといった内容になります。

時間に関する注意

・それから transition のときと同様に時間っぽい値が 2 つ出てきたら 1 つ目が duration 2 つ目が delay になります。つまり最初が変化時間で2つ目が変化を開始するまでの時間となります。

・なのでdurationを書かれている状態で更に1sと書いてあげたら後に書かれた方はdelay になります。

-CSS