Ülemineku viivitus - CSS-trikid | CSS-i almanahh 2025

transition-delayVara, tavaliselt kasutatakse osana transitionstenografist, kasutatakse, et määrata aeg viivitada algus üleminekut.

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

Väärtus võib olla üks järgmistest:

Kehtiv ajaväärtus sekundites või millisekundites, nt 1.3svõi125ms
Komaeraldusega ajaväärtuste loend ühe elemendi mitmel üleminekul eraldi viivitusväärtuste määramiseks, nt 1s background-color, 350ms transform

Vaikeväärtus transition-delayon 0s, mis tähendab, et viivitust ei toimu ja üleminek hakkab toimuma kohe. Ajaväärtust saab täpsema ajastuse jaoks väljendada kümnendpõhise arvuna.

Kui üleminekul on viivituse väärtus negatiivne, põhjustab see ülemineku viivitamatu alguse (ilma viivituseta), kuid üleminek algab protsessi poolelt, nagu oleks see juba alanud.

Järgmine pliiats näitab hõljutuse efekti kastil, mille transition-delayväärtus 2son ülemineku kestusega 1s:

Vaadake CodeSenil
CSS-
Tricksi (@ css-tricks) pliiatsi üleminekuviivituse demot.

Nüüd võrrelge seda järgmise demoga, mille viivitus -1sja kestus on 3s:

Vaadake CodePenist
CSS-
Tricksi (@ css-tricks) pliiatsi Negatiivne üleminekuviivituse demo .

Pange tähele, et teises näites on tegelikust üleminekust nähtavad ainult viimased kaks kolmandikku ja viivitust pole. Negatiivne väärtus eemaldab viivituse ja vähendab tõhusalt kestust.

Kõigi toetavate brauserite ühilduvuseks on vaja hankija eesliiteid, kusjuures viimane süntaks on deklareeritud viimasena:

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

IE10 (IE esimene stabiilne versioon, mida toetada transition-delay) ei vaja -ms-eesliidet.

Tavaline kasutus on üleminekute järkjärguline toimimine:

Vaadake
Chris Coyieri (@chriscoyier) pliiatsiga jaotatud animatsioone
CodePenis.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.