Style animationFillMode-egenskapen

definition och användning

animationFillMode egenskapen specificerar vilka stilar som tillämpas på elementet när animationen inte spelas upp (vid animationens slut, eller när det finns en "fördröjning").

som standard påverkar CSS-animationer inte det element som animeras innan den första viktiga ramen spelas upp, och slutar påverka det efter att den sista viktiga ramen har spelats upp.animationFillMode egenskapen kan överskriva detta beteende.

exempel

ändra <div>-elementets animationFillMode-egenskap:

document.getElementById("myDIV").style.animationFillMode = "forwards";

prova det själv

syntaks

returnera animationFillMode-egenskapen:

object.style.animationFillMode

ställ in animationFillMode-egenskapen:

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

egenskapsvärde

värde beskrivning
none standardvärde. Animationen tillämpar inte några stilar på målelementet innan eller efter att den utförs.
forwards efter att animationen har slutförts (bestämt av animation-iteration-count), kommer animationen att tillämpa detta egenskapsvärde vid animationens slut.
backwards

under tiden som definieras av animation-delay, kommer animationen att tillämpa egenskapsvärdena som definieras i den första viktiga ramen som startar den första iterationen av animationen.

dessa är från värdena från viktiga ramar (när animationens riktning är "normal" eller "alternate") eller till värdena från viktiga ramar (när animationens riktning är "reverse" eller "alternate-reverse").
both animationen följer reglerna för framåt och bakåt. Det innebär att den kommer att utöka animationsegenskapen i båda riktningarna.
initial sätt denna egenskap till dess standardvärde. Se initial.
inherit arver denna egenskap från sina föräldrelement. Se inherit.

tekniska detaljer

standardvärde: none
returvärde: sträng, som anger elementets animation-fill-mode-egenskap.
CSS-version: CSS3

webbläsarstöd

animationFillMode är en CSS3 (1999) egenskap.

Alla webbläsare stöder det fullständigt:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
stödjer stödjer stödjer stödjer stödjer 11

relaterade sidor

CSS referenshandbok:animation-fill-mode-egenskap