CSS3アニメーションプロパティのショートハンド覚え書き : Web制作の実験場・ショーケース

自分も駆け出しのころ、marginとかpaddingのショートハンドの記述順を覚えるのに苦労しました(笑)
ディスプレイの脇に「上右下左」なんて紙を貼っておき体に叩き込みました。
最近普及して来た感のあるCSS3アニメーション、
ロールオーバーぐらいなら、そんなに問題にはならないですが、
がっつり組んでしまうとCSSがかさばってさぁ大変、そこでショートハンドについて記事を書いてみます。

CSS3 アニメーションのプロパティ

animation-name　名前
animation-duration　秒
animation-timing-function　動き方
animation-delay　遅延（秒）
animation-iteration-count　繰り返し回数（無限はinfinite）
animation-direction　反転alternate　通常normal
通常は、上記のように6つのプロパティーとタイムラインの記述になります。
ただ、ベンダープレフィクスの記述までするともうCSSはかなりのボリュームになってしまいます。

ショートハンドの実例

#exthample_anime {
-moz-animation: 'anime1' 2s ease 0s 5 alternate;
-webkit-animation: 'anime1' 2s ease 0s 5 alternate;
-o-animation: 'anime1' 2s ease 0s 5 alternate;
-ms-animation: 'anime1' 2s ease 0s 5 alternate;
animation: 'anime1' 2s ease 0s 5 alternate;
}

#exthample_anime {

-moz-animation: 'anime1' 2s ease 0s 5 alternate;

-webkit-animation: 'anime1' 2s ease 0s 5 alternate;

-o-animation: 'anime1' 2s ease 0s 5 alternate;

-ms-animation: 'anime1' 2s ease 0s 5 alternate;

animation: 'anime1' 2s ease 0s 5 alternate;

}

こんな感じでanimation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-directionの順番に記述します。

ベンダープレフィックスを入れてもスッキリしますね。

出典：http://webdev-nekodama.xii.jp/css/pDetail.php?g=animations&p=animation&v=%5Banimation%5D

Blog