Exemplu
Animați ceva se deplasează dintr-un loc în altul și să-l rămână acolo:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Încearcă - l singur » Definiție și utilizare
Proprietatea de animație-fill-mode specifică un stil 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 afectează elementul până când primul cadru cheie este "played" , iar apoi se oprește odată ce ultimul keyframe a finalizat. Proprietatea de animație-fill-mode poate trece peste acest comportament.
| Valoare implicită: | none |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.animationFillMode="forwards" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15,0 -webkit- 12.1 12,0 -o- |
CSS Sintaxa
animation-fill-mode: none|forwards|backwards|both|initial|inherit;Valori de proprietate
| Valoare | Descriere |
|---|---|
| none | Valoare implicită. Animația nu se va aplica nici stiluri pentru elementul ț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 animation-direction 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 |
Pagini similare
Tutorial CSS3: CSS3 Animații
HTML DOM referință: animationFillMode property