CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 アニメーション-iteration-count 属性 CSS3 アニメーション-duration 属性

CSS3 アニメーション-fill-mode属性の使用方法及び例

CSS3 アニメーション-fill-mode属性は、CSSアニメーションが実行中か実行後にターゲットにどのようにスタイルを適用するかを指定します。

以下の表は、この属性の使用状況とバージョン履歴をまとめています。

デフォルト値：	none
適用範囲：	すべての要素::beforeおよび::after 仮想要素
継承：	ありません
アニメーション可能：	いいえ。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScript構文：	object.style.animationFillMode="forwards"

アニメーション-fill-modeの使用方法

この属性の構文は以下の通りです：

アニメーション-fill-モード:　なし　|　前進　|　後退　|　両方　|　初期　|　継承

以下の例では、animationの使用方法を示しています。-fill-mode属性。

例

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-アニメーション-name:　moveit;
　　　　-webkit-アニメーション-duration:　4s;
　　　　-webkit-アニメーション-fill-mode:　forwards;
　　　　
　　　　アニメーション-name:　moveit;
　　　　アニメーション-duration:　4s;
　　　　アニメーション-fill-mode:　forwards;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

テストして‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
none	アニメーションは実行前にまたは後にターゲットに何もスタイルを適用しません。
forwards	アニメーションが終わった後（アニメーション-iteration-count）で、アニメーションの終わりに属性値が適用されます。
backwards	アニメーションはキーフレームで定義された属性値に適用され、キーフレームはアニメーション-delay属性定義の時間内にアニメーションを開始する最初のイテレーション。これらはfromキーフレームの値（アニメーション-directionnormalまたはalternateの場合）またはtoキーフレームの値（アニメーション-directionreverseまたはalternateの場合-reverse）。
both	アニメーションは前向きと後向きのルールに従って動作し、アニメーション属性を両方向に拡張します。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のanimationを使用します。-fill-mode属性の計算値。

ブラウザの互換性

アニメーション-fill-mode属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 5+ ^-moz-、15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- オペラ 12+ ^-o-、15+ ^-webkit-

さらに詳しく

以下のチュートリアルを参照してください：CSS3アニメーション。

CSS3 アニメーション-iteration-count 属性 CSS3 アニメーション-duration 属性