Omadus animation
Omadus animation on animatsiooni
lühendomadus, mis võimaldab määrata
kõik animatsiooni omadused korraga: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Väärtuste järjekord ei oma tähtsust, kuid animatsiooni
kestus animation-duration peab tingimata
olema enne viivet animation-delay.
Ainult omadused animation-name
ja animation-duration on kohustuslikud.
Omadus võib võtta ka väärtuse none,
mis lülitab animatsiooni täielikult välja. See
väärtus on vaikeväärtus.
Süntaks
valija {
animation: väärtused;
}
Näide
Selles näites on animatsiooni ees viive
3 sekundit (enne iga uut esitust),
seejärel esitatakse animatsioon
6 sekundi jooksul:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: move 6s infinite 3s linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Näide . Võimalikud probleemid
Lühivormis kirjutatud animatsioon ei pruugi töötada oma nime tõttu. Vaatleme järgmist animatsiooni:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Pange tähele, et ma kasutan animatsiooni nime reverse.
Esmapilgul on kõik korras, kuid animatsioon
ei tööta, kuna reverse on kehtiv
võtmesõna omadusele animation-direction.
Samuti ei tööta animatsioon lühivormis kasutamisel, kui nimes on muid võtmesõnu. Kuid kõik töötab hästi "täisvormi" kasutamisel.
Võtmesõnad-väärtused animation-direction,
mis katkestavad animatsioonid, hõlmavad ka võtmesõnu,
mis kuuluvad silumisfunktsioonidesse,
ning ka infinite, alternate,
running, paused jne.
Vaata ka
-
käsu
@keyframes,
mis määrab animatsiooni võtmeraamid -
sujuvad ülemineked
transition, mis kujutavad endast elemendile hiirega viimise animatsiooni