Perėjimas - CSS-gudrybės | CSS almanachas 2025

transitionObjekto yra trumpa objekto naudojamas sudaryti iki keturių pereinamųjų susijusios Paprastoji laišką savybių:

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

Šios perėjimo savybės leidžia elementams pakeisti reikšmes per nurodytą laiką, animuojant ypatybių pokyčius, o ne tai, kad jie įvyktų iškart. Čia yra paprastas pavyzdys, perkeliantis elemento fono spalvą į: užveskite pelės žymeklį:

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

Kai pelė bus virš jos, tam divui prireiks pusės sekundės, kad jis pasikeistų iš raudonos į žalią. Štai gyvas tokio perėjimo demonstravimas:

Žiūrėkite „Louis Lazaris“ (@impressivewebs) „Pen Transition Demo“ demonstraciją „CodePen“.

Galite nurodyti tam tikrą ypatybę, kaip mes turime aukščiau, arba naudoti vertę „viskas“, kad nurodytumėte perėjimo ypatybes.

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

Šiame aukščiau pateiktame pavyzdyje tiek fonas, tiek užpildas bus perkelti dėl vertės „viskas“, nurodytos transition-propertystenografijos daliai.

Kableliais galite atskirti reikšmių rinkinius, kad atliktumėte skirtingus skirtingų savybių perėjimus:

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

Daugeliu atveju reikšmių tvarka neturi reikšmės - nebent nurodomas vėlavimas. Jei nurodote vėlavimą, pirmiausia turite nurodyti trukmę. Pirmoji reikšmė, kurią naršyklė atpažįsta kaip galiojančią laiko vertę, visada atspindės trukmę. Visos vėlesnės galiojančios laiko vertės bus analizuojamos kaip vėlavimas.

Kai kurių ypatybių negalima perkelti, nes jos nėra animuojamos ypatybės. Žr. Specifikacijas, kad būtų pateiktas visas animacinių savybių sąrašas.

Nurodydami perėjimą pačiame elemente, jūs apibrėžiate perėjimą, kuris vyks abiem kryptimis. Tai yra, kai stiliai bus pakeisti (pvz., Kai užveskite pelės žymeklį), jų savybės pereis, o kai stiliai pasikeis atgal (pvz., Išjungus pelės žymeklį), jie pereis. Pvz., Šie demonstraciniai perėjimai užvedus pelės žymeklį, bet ne užvedus pelės žymeklį:

„CodePen“ žiūrėkite Louis Lazaris (@impressivewebs) „Pen zohgt“.

Taip atsitinka todėl, kad perėjimas buvo perkeltas į :hoverbūsenos parinkiklį ir selektoriuje nėra tinkamo perėjimo, nukreipiančio elementą tiesiai be :hoverbūsenos.

Norint suderinti visas palaikomas naršykles, reikalingi tiekėjo priešdėliai, o standartinė sintaksė paskelbta paskutine:

.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 (pirmoji palaikoma IE versija transition) nereikia -ms-prefikso.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.