animation-fill-mode - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti animation-fill-mode nastavujeme co se děje s elementem, když je animace pozastavená (když skončí nebo čeká na začátek).
Hodnoty
- none (výchozí) - Po skončení (nebo před začátkem) je element s animací na místě, kde je umístěn v HTML.
- forwards - Po skončení animace zůstává element na pozici, kde zastavil.
- backwards - Když je nastaveno animation-delay, element čeká na začátek animace na místě, kde také animace začíná.
- both - Nastaví se obě předchozí hodnoty.
Ukázka
Vytvořme si červený čtverec o velikosti 100px × 100px s posuvnou animací trvající 3 sekundy a s čekáním na začátek animace 4 sekundy. Když se animace nebude přehrávat, bude na místě, kde animace končí a v tomto případě i začíná (hodnota both).
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: absolute; animation: animace 3s linear 4s; animation-fill-mode: both; } @keyframes animace { 0%, 100% { left: 100px; top: 100px; } 25% { left: 250px; top: 100px; } 50% { left: 250px; top: 250px; } 75% { left: 100px; top: 250px; } } </style> <title>animation-fill-mode</title> </head> <body> <div></div> </body> </html>
Výsledek:
Minulý zápis animace si můžeme zkrátit, abychom měli vše krásně přehledně. Pro zkrácení zápisu však musíme ještě nejdříve definovat tyto atributy:
- animation-name - Jméno animace
- animation-duration - Délka animace
- animation-timing-function - Způsob (a rychlost) animace
- animation-delay - Doba před spuštěním animace
- animation-direction - Směr (a rychlost) animace
animation: animace 3s linear 4s normal both;
Článek pro vás napsal Jan Lupčík
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.