transition-delay - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti transition-delay nastavujeme dobu před začátkem přechodného efektu. Můžeme tak určit za jak dlouho se přechodný efekt spustí. Toto čekání se provádí i na přechodným efektu zpět.
Hodnoty
- 0 (výchozí) - Přechodný efekt začíná ihned.
- čas - Nastavitelná doba v sekundách (s) nebo milisekundách (ms).
Ukázka
Pro ukázku si vytvořme div o rozměrech 100px × 100px s modrou barvou. Po najetí na element se bude 3 sekundy čekat na spuštění přechodného efektu, který bude trvat 2 sekundy a změní červené pozadí divu na modré.
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: #0088CC; transition-delay: 3s; -webkit-transition-delay: 3s; /* Chrome, Safari */ -moz-transition-delay: 3s; /* Mozilla Firefox */ transition-duration: 2s; -webkit-transition-duration: 2s; /* Chrome, Safari */ -moz-transition-duration: 2s; /* Mozilla Firefox */ } div:hover { background-color: red; } </style> <title>transition-delay</title> </head> <body> <div></div> </body> </html>
Výsledek:
Minulý zápis přechodného efektu si můžeme zkrátit na následující podobu, protože doba před začátkem animace je jako 4. vlastnost atributu transition. Předešlé atributy jsou:
- transition-property - Co se bude měnit
- transition-duration - Délka efektu
- transition-timing-function - Způsob (a rychlost) efektu
transition: all 2s ease 3s; -webkit-transition: all 2s ease 3s; /* Chrome, Safari */ -moz-transition: all 2s ease 3s; /* Mozilla Firefox */
Č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.