Vlastnosť animation
Vlastnosť animation je skrátená vlastnosť
pre animáciu, umožňuje nastaviť
všetky vlastnosti pre animáciu naraz: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Poradie hodnoty nemá význam, čas vykonania
animácie animation-duration musí
nevyhnutne stáť pred oneskorením animation-delay.
Povinnými sú len vlastnosti animation-name
a animation-duration.
Vlastnosť môže tiež nadobúdať hodnotu none,
ktorá úplne vypína animáciu. Táto
hodnota je predvolenou hodnotou.
Syntax
selektor {
animation: hodnoty;
}
Príklad
V tomto príklade bude pred animáciou oneskorenie
3 sekundy (pred každým novým prehrávaním),
a potom sa animácia bude prehrávať počas
6 sekúnd:
<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;
}
:
Príklad . Možné problémy
Animácia zapísaná v krátkej forme môže nefungovať kvôli svojmu názvu. Pozrime sa na nasledujúcu animáciu:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Všimnite si, používam názov animácie reverse.
Na prvý pohľad je všetko v poriadku, ale animácia
nefunguje, pretože reverse je platné
kľúčové slovo pre vlastnosť animation-direction.
Tiež animácia nebude fungovať pri použití v krátkej forme v názve iných kľúčových slov. Ale všetko funguje dobre pri použití "úplnej" formy opisu.
Medzi kľúčové slová-hodnoty animation-direction,
ktoré kazia animácie, patria aj kľúčové
slová týkajúce sa funkcií vyhladenia,
a tiež infinite, alternate,
running, paused a tak ďalej.
Pozri tiež
-
príkaz
@keyframes,
ktorý definuje kľúčové fázy animácie -
plynulé prechody
transition, ktoré predstavujú animáciu pri prejdení myšou nad prvok