Lastnost animation
Lastnost animation je okrajšava
za animacijo, ki omogoča nastavitev
vseh lastnosti za animacijo hkrati: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Vrstni red vrednosti ni pomemben, čas trajanja
animacije animation-duration mora nujno
stati pred zamiko animation-delay.
Obvezni sta samo lastnosti animation-name
in animation-duration.
Lastnost lahko sprejme tudi vrednost none,
ki popolnoma onemogoči animacijo. Ta
vrednost je privzeta.
Sintaksa
selektor {
animation: vrednosti;
}
Primer
V tem primeru bo pred animacijo zamika
v 3 sekundah (pred vsakim novim predvajanjem),
nato pa se bo animacija predvajala 6
sekund:
<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;
}
:
Primer . Možne težave
Animacija, zapisana v kratki obliki, morda ne deluje zaradi svojega imena. Oglejmo si naslednjo animacijo:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Upoštevajte, da uporabljam ime animacije reverse.
Na prvi pogled je vse v redu, vendar animacija
ne deluje, ker je reverse veljavna
ključna beseda za lastnost animation-direction.
Prav tako animacija ne bo delovala, če v kratki obliki uporabimo druge ključne besede v imenu. Vendar vse dobro deluje pri uporabi "polne" oblike opisa.
Med ključne besede-vrednosti animation-direction,
ki lomijo animacije, spadajo tudi ključne
besede, ki se nanašajo na funkcije glajenja,
kot tudi infinite, alternate,
running, paused in tako naprej.
Glej tudi
-
ukaz
@keyframes,
ki določa ključne kadre animacije -
glasni prehodi
transition, ki predstavljajo animacijo ob preletu miške nad elementom