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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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ích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitní modifikace TruckersMP.
Komentáře
Zatím nikdo nevložil komentář - buď první!