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以上の対応です。

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.9. The ‘animation-fill-mode’ Property

登録日 : 2013年08月01日 最終更新日 : 2013年8月25日

同じカテゴリー(Animation)のエントリー

検索

スポンサードリンク

バージョン

リファレンス