Tranziție-întârziere - CSS-Tricks

transition-delayProprietatea, utilizată în mod normal , ca parte a transitionstenografie, este folosit pentru a defini o perioadă de timp pentru a întârzia începerea unei tranziții.

.delay-me ( transition-delay: 0.25s; )

Valoarea poate fi una dintre următoarele:

O valoare de timp validă definită în secunde sau milisecunde de exemplu 1.3ssau125ms
O listă de valori de timp separate prin virgulă, pentru definirea valorilor de întârziere separate pe tranziții multiple pentru un singur element, de ex 1s background-color, 350ms transform

Valoarea implicită pentru transition-delayeste 0s, adică nu va avea loc nici o întârziere și tranziția va începe să aibă loc imediat. Valoarea timpului poate fi exprimată ca un număr zecimal pentru o sincronizare mai precisă.

Când o tranziție are o valoare de întârziere care este negativă, aceasta va face ca tranziția să înceapă imediat (fără întârziere), cu toate acestea, tranziția va începe parțial prin proces, ca și cum ar fi început deja.

Următorul stilou arată un efect de plutire pe o casetă care folosește o transition-delayvaloare 2scu o durată de tranziție de 1s:

Vedeți
demo-ul de întârziere a tranziției
stilului de către CSS-Tricks (@ css-tricks) pe CodePen.

Acum comparați-l cu următoarea demonstrație, care are o întârziere -1sși o durată de 3s:

Vedeți
demo-ul cu întârziere a tranziției negative de către CSS-Tricks (@ css-tricks)
pe CodePen.

Observați că în cel de-al doilea exemplu, doar cele două treimi finale ale tranziției efective sunt vizibile și nu există nicio întârziere. Valoarea negativă elimină întârzierea și reduce efectiv durata.

Pentru compatibilitate în toate browserele compatibile, sunt necesare prefixele furnizorului, cu sintaxa standard declarată ultima:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (prima versiune stabilă de IE care acceptă transition-delay) nu necesită -ms-prefixul.

Un caz de utilizare obișnuit este tranziția etapizată:

Vedeți
Animațiile Staggered Pen de Chris Coyier (@chriscoyier)
pe CodePen.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.