animation
animationはkeyframesで作成したアニメーションの指定ができるプロパティです。
animationはanimation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-stateをまとめて指定できるショートハンドプロパティです。
animation : anime01 400ms ease 400ms infinite reverse;
各値は省略可能ですが、時間の指定は順番が重要です。最初に指定された時間をトランジションアニメーションの時間(animation-duration)、2番目に指定された時間がトランジションアニメーションの遅延時間(animation-delay)として採用されます。
animation : anime01 400ms 400ms;
一部のブラウザでは「-webkit-」やといったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。
-webkit-animation : anime01 400ms ease;
animation : anime01 400ms ease;
animation-fill-modeに関する指定は、他のAnimation関連のプロパティと異なり、Android 2.3以下の端末は対応しておらずAndroid 4以上の対応です。
CSS3のanimationはAndroid端末での不具合が多いため利用する際には注意してください。(参考:@keyframesとAndroid – to-R)
対応ブラウザ
IE | Chrome 28 | Safari | Firefox 22 | iOS | Android |
---|---|---|---|---|---|
◯ 10〜 | △ | △ 5〜 | ◯ | △ 3.2〜 | △ 4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。
参考URL
4.10. The ‘animation’ Shorthand Property - W3C
登録日 : 2013年08月20日 最終更新日 : 2013年8月25日