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:

Vlastnost transition-delay v CSS 3 - Ostatní CSS vlastnosti

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.

Aktivity

Nejčastěji vyhledáváné

transition-delay - Český CSS 3 manuál

Hodnoty

Ukázka