Vlastnost CSS animation-fill-mode
Příklad
Nechte prvek <div> po skončení animace zachovat hodnoty stylu z posledního klíčového snímku:
div {
animation-fill-mode: forwards;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost animation-fill-mode
určuje styl pro prvek, když se animace nepřehrává (před jejím začátkem, po jejím skončení nebo obojí).
Animace CSS neovlivňují prvek před přehráním prvního klíčového snímku nebo po přehrání posledního klíčového snímku. Vlastnost animation-fill-mode
může toto chování přepsat.
Výchozí hodnota: | žádný |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.animationFillMode="vpřed" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit-, -moz- nebo -o- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
Syntaxe CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Hodnoty vlastností
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Nechte prvek <div> získat před začátkem animace hodnoty stylu nastavené prvním klíčovým snímkem (během období zpoždění animace):
div {
animation-fill-mode: backwards;
}
Příklad
Umožněte prvku <div> získat před začátkem animace hodnoty stylu nastavené prvním klíčovým snímkem a po skončení animace zachovat hodnoty stylu z posledního klíčového snímku:
div {
animation-fill-mode: both;
}
Související stránky
CSS tutoriál: CSS animace
Odkaz HTML DOM: vlastnost animationFillMode