Vlastnost animation
Vlastnost animation je zkratková vlastnost
pro animaci, umožňuje nastavit
všechny vlastnosti pro animaci současně: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Pořadí hodnoty nemá význam, doba trvání
animace animation-duration musí
povinně stát před zpožděním animation-delay.
Povinné jsou pouze vlastnosti animation-name
a animation-duration.
Vlastnost může také přijmout hodnotu none,
která animaci úplně vypne. Tato
hodnota je výchozí hodnotou.
Syntaxe
selektor {
animation: hodnoty;
}
Příklad
V tomto příkladu bude před animací zpoždění
3 sekundy (před každým novým přehráním),
a poté se animace bude přehrávat po dobu
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;
}
:
Příklad . Možné problémy
Animace zapsaná ve zkrácené formě může nefungovat kvůli svému názvu. Podívejme se na následující animaci:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Všimněte si, používám název animace reverse.
Na první pohled je vše v pořádku, ale animace
nefunguje, protože reverse je platné
klíčové slovo pro vlastnost animation-direction.
Také animace nebude fungovat při použití ve zkrácené formě, pokud název obsahuje jiná klíčová slova. Ale vše funguje dobře při použití "plné" formy popisu.
Mezi klíčová slova-hodnoty animation-direction,
které mohou rozbít animace, patří i klíčová
slova patřící k vyhlazovacím funkcím,
a také infinite, alternate,
running, paused a tak dále.
Viz také
-
příkaz
@keyframes,
který definuje klíčové snímky animace -
plynulé přechody
transition, které představují animaci při najetí na element