Övergång - CSS-tricks | CSS Almanack 2025

Den transitionegenskapen är en förkortning egendom som används för att representera upp till fyra övergångsrelaterad long egenskaper:

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

Dessa övergångsegenskaper gör det möjligt för element att ändra värden under en viss varaktighet, animera egendomsändringarna, snarare än att få dem att ske omedelbart. Här är ett enkelt exempel som övergår till bakgrundsfärgen på ett element på: sväva:

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

Den div kommer att ta en halv sekund när musen är över den för att bli från röd till grön. Här är en live demonstration av en sådan övergång:

Se Pen Transition Demo av Louis Lazaris (@impressivewebs) på CodePen.

Du kan ange en viss egenskap som vi har ovan, eller använda värdet ”alla” för att hänvisa till övergångsegenskaper.

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

I det här exemplet kommer både bakgrund och stoppning att övergå på grund av värdet "allt" som anges för transition-propertydelen av stenografin.

Du kan komma med separata värdesatser för att göra olika övergångar på olika egenskaper:

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

För det mesta spelar inte ordningen på värden någon roll - såvida inte en fördröjning anges. Om du anger en fördröjning måste du först ange en varaktighet. Det första värdet som webbläsaren känner igen som ett giltigt tidsvärde representerar alltid varaktigheten. Alla efterföljande giltiga tidsvärden analyseras som fördröjning.

Vissa egenskaper kan inte överföras eftersom de inte är animerbara egenskaper. Se specifikationen för en fullständig lista över vilka egenskaper som kan animeras.

Genom att ange övergången på själva elementet definierar du övergången som ska ske i båda riktningarna. Det vill säga, när stilarna ändras (t.ex. vid svävar på) kommer egenskaperna att övergå, och när stilarna ändras tillbaka (t.ex. när svävar av) kommer de att övergå. Exempelvis övergår följande demo på svävar, men inte på svävar av:

Se Pen zohgt av Louis Lazaris (@impressivewebs) på CodePen.

Detta händer eftersom övergången har flyttats till :hovertillståndsväljaren och det inte finns någon matchande övergång på väljaren som riktar in sig på elementet direkt utan :hovertillståndet.

För kompatibilitet i alla stödjande webbläsare krävs leverantörsprefix, med standardsyntax deklarerad som sist:

.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 (den första stabila versionen av IE som stöds transition) kräver inte -ms-prefixet.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.