Üleminek - CSS-trikid | CSS-i almanahh 2025

See transitionvara on lühike omadus, mida kasutatakse kuni nelja üleminekuga seotud pikakäelise atribuudi tähistamiseks:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Need üleminekuomadused võimaldavad elementidel väärtusi teatud aja jooksul muuta, animeerides atribuudimuutused, selle asemel, et need toimuksid kohe. Siin on lihtne näide, mis viib elemendi taustavärvi üle: hõljutage:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Sellel divil kulub punasest roheliseks muutumiseks pool sekundit, kui hiir on selle kohal. Siin on sellise ülemineku elav demonstratsioon:

Vaadake CodePenil Louis Lazarise (@impressivewebs) pliiatsi siirdamise demot.

Võite määrata konkreetse atribuudi, nagu meil on eespool, või kasutada üleminekuomadustele viitamiseks väärtust "kõik".

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Selles ülaltoodud näites siirduvad nii taust kui ka polster, mis tuleneb transition-propertystenogrammi osale määratud väärtusest "kõik" .

Erinevatel omadustel erinevate üleminekute tegemiseks võite komaga eraldada väärtuste komplektid:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Enamasti pole väärtuste järjestus oluline - kui viivitust pole määratud. Kui määrate viivituse, peate kõigepealt määrama kestuse. Esimene väärtus, mille brauser tunnistab kehtivaks ajaväärtuseks, tähistab alati kestust. Kõik järgnevad kehtivad ajaväärtused analüüsitakse viivitusena.

Mõnda atribuuti ei saa teisaldada, kuna need pole animeeritavad atribuudid. Animeeritavate omaduste täieliku loendi leiate spetsifikatsioonist.

Määrates elemendi enda ülemineku, määrate ülemineku mõlemas suunas. See tähendab, et kui stiile muudetakse (nt kui kursor on sees), lähevad nende omadused üle ja kui stiilid muutuvad tagasi (nt. Näiteks järgmised demo üleminekud hõljutamisel, kuid mitte hõljumisel:

Vaadake CodePenil Louis Lazarise (@impressivewebs) Pen zohgt.

See juhtub seetõttu, et üleminek on viidud :hoverolekuvalijale ja selektoril pole ühtegi vastavat üleminekut, mis sihiks elemendi otse ilma :hoverolekuta.

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

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

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

Brauseri tugi

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