Exemplu
Schimbarea proprietatea animationFillMode unui <div> Element:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Încearcă - l singur » Definiție și utilizare
Proprietatea animationFillMode specifică ce se va aplica stiluri pentru elementul atunci când animația nu se joacă (when it is finished, or when it has a "delay") .
În mod implicit, animații CSS nu va afecta elementul pe care îl animarea până la primul cadru cheie este "played" , iar apoi se oprește - l afectează odată ce ultimul keyframe a finalizat. Proprietatea animationFillMode poate trece peste acest comportament.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmate de Moz specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | Nu sunt acceptate | 16.0 5.0 Moz | Nu sunt acceptate | 30.0 |
Sintaxă
Întoarcere proprietatea animationFillMode:
object .style.animationFillMode Setați proprietatea animationFillMode:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
Valori de proprietate
| Valoare | Descriere |
|---|---|
| none | Valoare implicită. Animația nu se va aplica nici stiluri la țintă înainte sau după ce este de executare |
| forwards | După capetele de animație (determined by animation-iteration-count) , animația se vor aplica valorile de proprietate pentru momentul în care sa încheiat animație |
| backwards | Animația se va aplica valorile de proprietate definite în keyframe care va începe prima iterație a animației, în perioada definită de animație întârziere. Acestea sunt fie valorile de la keyframe (when animation-direction is "normal" or "alternate") sau pe cele ale la keyframe (when animationDirection is "reverse" or "alternate-reverse") |
| both | Animatia va urma regulile pentru ambele înainte și înapoi. Asta este, se va extinde proprietățile de animație în ambele direcții |
| initial | Setează această proprietate la valoarea implicită. Citiți despre inițială |
| inherit | Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc |
Detalii tehnice
| Valoare implicită: | nici unul |
|---|---|
| Întoarcere Valoare: | Un șir, reprezentând proprietatea de animație-fill-mode al unui element |
| CSS Versiune | CSS3 |
Pagini similare
Referință CSS: animation-fill-mode property de animation-fill-mode property
<Style Object