animation-fill-mode
animation-fill-modeはkeyframesで作成したアニメーションが適応される前後の状態を指定できるプロパティです。
animation-delayによりアニメーションが遅延されている場合はアニメーションが実行されるまでの時間、そしてアニメーションが終了したあとの状態をどのようにするかが指定できます。
| none | デフォルトの値でアニメーションの前後にはスタイルを適用しません |
|---|---|
| backwards | アニメーション終了後にそのスタイルを維持します。 |
| forwards | アニメーション開始前に@keyframesが0%もしくはfromのスタイルを適用します。 |
| both | backwardsとforwardsの両方のスタイルを適用します。 |
例えば、以下のように指定します。
animation-fill-mode:both;一部のブラウザでは「-webkit-」やといったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。
-webkit-animation-fill-mode:both;
animation-fill-mode:both;また、Android端末では他のAnimation関連のプロパティと異なり、Android 2.3以下の端末は対応しておらずAndroid 4以上の対応です。
CSS３のanimationはAndroid端末での不具合が多いため利用する際には注意してください。(参考:@keyframesとAndroid – to-R)
対応ブラウザ
| IE | Chrome 28 | Safari | Firefox 22 | iOS | Android |
|---|---|---|---|---|---|
| ◯ 10〜 | △ | △ 5〜 | ◯ | △ 3.2〜 | △ 4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。
参考URL
4.9. The ‘animation-fill-mode’ Property
登録日 : 2013年08月01日 最終更新日 : 2013年8月25日