Przykład
Oprawa animację do <div> elementu, używając właściwości skrótowej:
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość animacja jest skróconą własnością dla ośmiu właściwości animacji:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note: Zawsze określić właściwości animacji, czas trwania, w przeciwnym razie czas trwania wynosi 0, i nigdy nie będą odtwarzane.
| Domyślna wartość: | none 0 ease 0 1 normal none running |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.animation="mymove 5s infinite" 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 | 43,0 4,0 -webkit- | 10,0 | 16,0 5,0 -moz- | 9,0 4,0 -webkit- | 30,0 15,0 -webkit- 12,0 -o- |
Składnia CSS
animation:name duration timing-function delay iteration-count
direction fill-mode play-state;wartości nieruchomości
| Wartość | Opis |
|---|---|
| animation-name | Określa nazwę kluczowej chcesz wiązać się z selektora |
| animation-duration | Określa ile sekund lub milisekund animacja trwa do ukończenia |
| animation-timing-function | Określa krzywą prędkości animacji |
| animation-delay | Określa opóźnienie, zanim rozpocznie się animacja |
| animation-iteration-count | Określa, ile razy animacja powinna być odtwarzana |
| animation-direction | Określa, czy animacja powinna odgrywać w odwrotnej kolejności na naprzemiennych cyklach |
| animation-fill-mode | Określa, jakie wartości są stosowane przez animacji poza czasem jest wykonującego |
| animation-play-state | Określa, czy animacja jest uruchomiony lub wstrzymany |
| 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: animation property