name a duration

name a duration

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!