CSS3 vlastnot animation-fill-mode udává stav elementu před a po skončení animace.
@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; }
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.