animation-direction
animation-directionはkeyframes作成したアニメーションの向きを指定できるプロパティです。
animation-directionには以下の値を指定することができます。
| normal | アニメーションが0%から100%にむけて実行されます。 |
|---|---|
| reverse | アニメーションが100%から0%にむけて実行されます。 |
| alternate | 奇数回目のアニメーションは0%から100%にむけて、偶数回目のアニメーションは100%から0%にむけて実行されます。 |
| alternate-reverse | 奇数回目のアニメーションは100%から0%にむけて、偶数回目のアニメーションは0%から100%にむけて実行されます。 |
たとえばalternateは以下のような指定になります。
animation-direction:alternate;一部のブラウザでは「-webkit-」といったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。
-webkit-animation-direction:alternate;
animation-direction:alternate;CSS３のanimationはAndroid端末での不具合が多いため利用する際には注意してください。(参考:@keyframesとAndroid – to-R)
対応ブラウザ
| IE | Chrome 28 | Safari | Firefox 22 | iOS | Android |
|---|---|---|---|---|---|
| ◯ 10〜 | △ | △ 5〜 | ◯ | △ 3.2〜 | △ 2.1〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。
参考URL
4.6. The ‘animation-direction’ Property
登録日 : 2013年07月26日 最終更新日 : 2013年8月25日