animationプロパティ

animationプロパティは、アニメーション関連のプロパティを一括指定するプロパティです。以下のプロパティを同時に設定できます：animation-name、 animation-duration、 animation-delay、 animation-timing-function、 animation-iteration-count、 animation-direction、 animation-fill-mode、 animation-play-state。

値の順序は自由ですが、アニメーションの実行時間を指定するanimation-durationの値は、遅延時間を指定するanimation-delayの値より前に記述する必要があります。必須となるのはanimation-nameとanimation-durationの指定のみです。

また、このプロパティには値noneを指定でき、これはアニメーションを完全に無効にします。この値がデフォルト値です。

構文

cssセレクター {
  animation: 値;
}

例

この例では、アニメーションは（毎回再生開始前に）3秒の遅延があり、その後6秒間再生されます：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例 . 発生する可能性のある問題

短縮形で記述されたアニメーションは、その名前が原因で機能しない場合があります。次のアニメーションを見てみましょう：

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

アニメーションの名前としてreverseを使用していることに注意してください。一見問題なさそうですが、このアニメーションは動作しません。なぜならreverseは、animation-directionプロパティの有効なキーワードだからです。

同様に、アニメーション名に他のキーワードを使用した場合も、短縮形では動作しません。しかし、「完全な」形で記述すれば正常に動作します。

アニメーションを壊す可能性があるanimation-directionのキーワード値に加えて、イージング関数に関連するキーワードや、infinite、alternate、running、pausedなども同様の問題を引き起こす可能性があります。

関連項目