animation-fill-mode

CSS3 vlastnot animation-fill-mode udává stav elementu před a po skončení animace.

Příklad:

    
@keyframes zacatek_konec {
  0%   {left: 0px; background: rgba(255, 255, 0, 1);}
  100% {left: 200px;}
}
div:hover {
  position: relative;
  animation-name: zacatek_konec;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;  
}

Seznam hodnot:

backwards (stav elementu před zahájením animace)
forwards (stav elementu po skončení animace)
both (obě předchozí hodnoty dohromady)

Hodnota both říká, že se má animace připravit k animování ve stavu 0%, než uběhnou 2s, které udává vlastnost animation-delay. Něco jako když nastartujete u formule motor a čekáte na start.

Dále hodnota both ještě ponechá element po skončení animace ve stavu 100%, dokud nezrušíme :hover (nesjedeme myší z původního místa, kde element začal svoji animaci).

Samozřejmě existuje více možností spuštění animace. Od JavaScriptu po samotné načtení stránky.

Kdyžbych nepoužil "omezení" :hover, animace by se spustily hned, jakmile by prohlížeč načetl stránku.