CSS3 vlastnosti animation-duration a animation-name jsou základem, který samotnou animaci rozpohybuje.
@keyframes jmeno_animace { 0% {left: 0px;} 50% {left: 200px;} 100% {left: 0px;} } div:hover { position: relative; animation-name: jmeno_animace; animation-duration: 2s; }
Právě se díváte na nejnutnější základ, který je třeba pro rozběhání animace: jméno (animation-name
) a doba trvání (animation-duration
), přiřazené k nějakému elementu třeba div.
Samozřejmě animace bude fungovat i v případě, že uvedeme jen hodnoty 0% {left: 0px;}
a 100% {left: 200px;}
.
Jenže když neuvedeme třetí hodnotu (třeba 50%), bude chybět plynulý návrat do počátečního stavu.
Animovaný element musí mít relativní a nebo absolutní pozici!