Przykład
Zmiana własności animationFillMode o <div> element:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość animationFillMode określa jakie style będą miały zastosowanie do elementu, gdy animacja nie jest odtwarzana (when it is finished, or when it has a "delay") .
Domyślnie animacje CSS nie wpłynie element jesteś animowanie dopóki pierwsza klatka kluczowa jest "played" , a następnie zatrzymuje wpływania raz ostatni klatka kluczowa została zakończona. Nieruchomość animationFillMode mogą zmienić to zachowanie.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Numery obserwowani przez Moz określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| animationFillMode | 43,0 | Nieobsługiwany | 16,0 5,0 Moz | Nieobsługiwany | 30,0 |
Składnia
Zwraca właściwość animationFillMode:
object .style.animationFillMode Ustaw właściwość animationFillMode:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
wartości nieruchomości
| Wartość | Opis |
|---|---|
| none | Domyślna wartość. Animacja nie będzie stosować żadnych stylów do celu przed lub po jego wykonaniu |
| forwards | Po zakończeniu animacji (determined by animation-iteration-count) , animacja będzie stosować wartości nieruchomości po raz animacja zakończony |
| backwards | Animacja będzie stosować wartości właściwości zdefiniowane w klatce kluczowej, która rozpocznie pierwszą iterację animacji, w okresie wyznaczonym przez animacji opóźnienia. Są to zarówno wartości FROM klatki kluczowej (when animation-direction is "normal" or "alternate") samych lub z Keyframe (when animationDirection is "reverse" or "alternate-reverse") |
| both | Animacja będzie przestrzegać zasad dla obu przodu i do tyłu. Oznacza to, że będzie to rozszerzenie właściwości animacji w obu kierunkach |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowy |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczyć |
Szczegóły techniczne
| Domyślna wartość: | Żaden |
|---|---|
| Zwracana wartość: | Ciąg, stanowiących własność animacja-fill-mode elementu |
| Wersja CSS | CSS3 |
Podobne strony
Odniesienie CSS: animation-fill-mode property
<Style obiektu