Prijelaz - CSS-trikovi | CSS Almanah 2025

transitionNekretnina je Skraćeno svojstvo koristi se u značenju do četiri prijelaza vezane doslovnog svojstva:

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

Ova svojstva prijelaza omogućuju elementima da mijenjaju vrijednosti tijekom određenog trajanja, animirajući promjene svojstava, umjesto da se one odmah dogode. Evo jednostavnog primjera koji mijenja boju pozadine elementa na: hover:

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

Taj div će trebati pola sekunde kada miš pređe preko njega da bi se iz crvene prebacio u zelenu. Evo demonstracije takvog prijelaza uživo:

Pogledajte demo o tranziciji olovke Louisa Lazarisa (@impressivewebs) na CodePenu.

Možete odrediti određeno svojstvo kao što je gore navedeno ili upotrijebiti vrijednost "sve" za pozivanje svojstava prijelaza.

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

U ovom gornjem primjeru, i pozadina i dodavanje prijeći će se zbog vrijednosti "sve" navedene za transition-propertydio stenografije.

Možete zarezom odvojiti skupove vrijednosti da biste napravili različite prijelaze na različitim svojstvima:

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

Redoslijed vrijednosti uglavnom nije važan - osim ako nije određeno kašnjenje. Ako navedete kašnjenje, prvo morate navesti trajanje. Prva vrijednost koju preglednik prepozna kao valjanu vremensku vrijednost uvijek će predstavljati trajanje. Svaka kasnija valjana vrijednost vremena raščlanit će se kao kašnjenje.

Neka svojstva se ne mogu prijeći jer nisu animirana svojstva. Pogledajte specifikaciju za cjelovit popis animiranih svojstava.

Određivanjem prijelaza na samom elementu definirate prijelaz koji će se dogoditi u oba smjera. Odnosno, kada se promijene stilovi (npr. Pri zadržavanju pokazivača miša), njihova će se svojstva promijeniti, a kada se stilovi vrate (npr. Pri prelasku lebdenja) prijeći će. Na primjer, sljedeći demo prijelazi kod zadržavanja, ali ne i kod isključivanja:

Pogledajte Pen zohgt Louisa Lazarisa (@impressivewebs) na CodePenu.

To se događa jer je prijelaz premješten u :hoverselektor stanja i na selektoru ne postoji odgovarajući prijelaz koji izravno cilja element bez :hoverstanja.

Za kompatibilnost u svim podržanim preglednicima potrebni su prefiksi dobavljača, sa standardnom sintaksom koja je proglašena zadnjom:

.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 (prva stabilna verzija IE-a koja podržava transition) ne zahtijeva -ms-prefiks.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.