Prehod - CSS-triki | Almanah CSS 2025

transitionLastnost je okrajšava lastnost uporablja za predstavitev do štiri prehodom povezanih longhand lastnostmi:

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

Te lastnosti prehodov omogočajo, da elementi spreminjajo vrednosti v določenem trajanju in animirajo spremembe lastnosti, namesto da bi se zgodile takoj. Tu je preprost primer, ki spremeni barvo ozadja elementa na: hover:

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

Ta div bo trajal pol sekunde, ko bo miška nad njim, da bo iz rdeče prešel v zeleno. Tukaj je prikaz takega prehoda v živo:

Oglejte si demo o prehodu pisala Louisa Lazarisa (@impressivewebs) na CodePen.

Določite lahko določeno lastnost, kot jo imamo zgoraj, ali pa uporabite vrednost »vse« za sklicevanje na lastnosti prehoda.

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

V tem zgornjem primeru se bosta spremenili ozadje in oblazinjenje zaradi vrednosti "vse", določene za transition-propertydel stenografije.

Naloge vrednosti lahko ločite z vejico, da naredite različne prehode za različne lastnosti:

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

Večinoma vrstni red vrednosti ni pomemben - razen če ni določena zamuda. Če določite zamudo, morate najprej določiti trajanje. Prva vrednost, ki jo brskalnik prepozna kot veljavno časovno vrednost, bo vedno predstavljala trajanje. Vsa naslednja veljavna časovna vrednost bo razčlenjena kot zamuda.

Nekaterih lastnosti ni mogoče prehoditi, ker niso animirane lastnosti. Za celoten seznam lastnosti, ki jih je mogoče animirati, glejte specifikacijo.

Z določitvijo prehoda na samem elementu določite prehod, ki se bo zgodil v obe smeri. To pomeni, da ko se slogi spremenijo (npr. Ob lebdenju), se njihove lastnosti spremenijo, ko pa se slogi spremenijo (npr. Ob lebdenju), se spremenijo. Na primer, naslednji predstavitveni prehodi pri lebdenju, ne pa tudi pri izklopu miške:

Oglejte si Pen zohgt Louisa Lazarisa (@impressivewebs) na CodePen.

To se zgodi, ker je bil prehod premaknjen v :hoverizbirnik stanja in na izbirniku ni ustreznega prehoda, ki bi neposredno ciljal na element brez :hoverstanja.

Za združljivost v vseh podpornih brskalnikih so potrebne predpone ponudnikov s standardno sintakso, razglašeno za zadnjo:

.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 različica IE, ki podpira transition) ne zahteva -ms-predpone.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.