Exemplu
Legarea o animație la un <div> element folosind proprietatea stenografie:
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
Încearcă - l singur » Definiție și utilizare
Proprietatea de animație este o proprietate prescurtare pentru opt dintre proprietăți de animație:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note: specificați întotdeauna proprietatea de animație durată, în caz contrar durata este 0, și niciodată nu va fi redat.
| Valoare implicită: | none 0 ease 0 1 normal none running |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.animation="mymove 5s infinite" 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 | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9 4.0 -webkit- | 30.0 15,0 -webkit- 12,0 -o- |
CSS Sintaxa
animation: Valori de proprietate Valoare Descriere animation-name Specifică numele keyframe pe care doriți să se lege la selectorul animation-duration Specifică cât de multe secunde sau milisecunde ia o animație pentru a finaliza
animation-timing-function Specifică curba de viteză de animație animation-delay Specifică o întârziere înainte de animație va începe
animation-iteration-count Specifică de câte ori ar trebui să fie jucat o animație animation-direction Specifică dacă este sau nu ar trebui să joace animație în sens invers pe cicluri alternative animation-fill-mode Specifică ce valori sunt aplicate de animație în afara timpului este de executare animation-play-state Specifică dacă animația se execută sau întrerupte 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 de referință: animation property de animation property