Przykład
Animowanie coś przemieszczających się z jednego miejsca do drugiego i go tam:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość animacja-fill-mode określa styl dla elementu, gdy animacja nie jest odtwarzana (when it is finished, or when it has a delay) .
Domyślnie animacje CSS nie wpływają element dopóki pierwsza klatka kluczowa jest "played" , a następnie zatrzymuje się po raz ostatni klatka kluczowa została zakończona. Nieruchomość animacja-fill-mode może to zmienić.
| Domyślna wartość: | none |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.animationFillMode="forwards" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4,0 -webkit- | 10,0 | 16,0 5,0 -moz- | 4,0 -webkit- | 15,0 -webkit- 12,1 12,0 -o- |
Składnia CSS
animation-fill-mode: 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 elementu docelowego 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 zastosuje wartości właściwości określone w kluczowej, która rozpocznie pierwszej iteracji animacji, w okresie wyznaczonym przez animacji opóźnienia. Są to albo wartości FROM klatki kluczowej (when animation-direction is "normal" or "alternate") lub te z do klatki kluczowej (when animation-direction 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ątkowej |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Podobne strony
Tutorial CSS3: CSS3 animacje
Odniesienia HTML DOM: animationFillMode property