animation

概要

animation CSS プロパティは、animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction の各プロパティの値を設定するショートハンドプロパティです。

アニメーションをさせる CSS プロパティの一覧 を利用できます。これらが CSS transitions でサポートされるプロパティと同じであることは注目するに値します。

• 初期値 このプロパティはショートハンドプロパティであるため、以下の各プロパティの初期値から構成されます。
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
• 適用対象 すべての要素と ::before および ::after 疑似要素
• 継承 継承しない
• メディア visual
• 計算値 指定値
• アニメーションの可否 不可
• 正規順序 order of appearance in the formal grammar of the values

構文

animation:  [ <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
              <animation-iteration-count> || <animation-direction>] 
            [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
              <animation-iteration-count> || <animation-direction>] ]*  

例示

CSS animations を参照してください。

仕様

ブラウザ実装状況

参考情報

• CSS animations
• AnimationEvent
• アニメーション関連の CSS プロパティ及び @-規則: animation 、 animation-delay 、 animation-direction 、 animation-duration 、 animation-fill-mode 、 animation-iteration-count 、 animation-name 、 animation-play-state 、 animation-timing-function 、 @keyframes