animation-duration - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti animation-duration nastavujeme dobu trvání celé animace. Můžeme tedy takto určit rychlost animace.
Hodnoty
- 0 (výchozí) - Animace se vůbec nespouští. Proto je potřeba přenastavit výchozí hodnotu na nějaký čas.
- čas - Nastavitelná doba v sekundách (s) nebo milisekundách (ms).
Ukázka
Vytvořme si obyčejný zelený div o velikosti 100px × 100px s posuvnou animací, která bude trvat 2 sekundy.
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: green; position: absolute; left: 100px; top: 100px; animation: animace linear; animation-duration: 2s; } @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-duration</title> </head> <body> <div></div> </body> </html>
Výsledek:
Minulý zápis si můžeme zkrátit, abychom nemuseli psát tak dlouhé animace. Zápis si zkrátíme do atributu animation. Abychom si to však mohli zkrátit, musíme definovat následující atributy:
- animation-name - Jméno animace
- Tento atribut
- animation-timing-function - Způsob (a rychlost) animace
animation: animace 2s linear;
Č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.