Átmenet - CSS-trükkök | CSS Almanach 2025

A transitiontulajdonság rövidített tulajdonság, amelyet legfeljebb négy, átmenethez kapcsolódó, hosszúkézi tulajdonság képviseletére használnak:

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

Ezek az átmeneti tulajdonságok lehetővé teszik az elemek számára, hogy az értékeket egy meghatározott időtartam alatt megváltoztassák, a tulajdonságváltozásokat animálva, ahelyett, hogy azonnal bekövetkeznének. Itt van egy egyszerű példa, amely áttér egy elem háttérszínére : hover:

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

Ez a div fél másodpercet vesz igénybe, amikor az egér fölött van, hogy pirosról zöldre változzon. Itt van egy élő átadás az ilyen átmenetről:

Lásd Louis Lazaris (@impressivewebs) Pen Transition Demo-ját a CodePen-en.

Megadhat egy adott tulajdonságot, ahogy fentebb van, vagy használhatja az „all” értéket az átmeneti tulajdonságokra való hivatkozáshoz.

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

Ebben a fenti példában mind a háttér, mind a kitöltés transition-propertyátkerül, a gyorsírás részéhez megadott „all” érték miatt .

Vesszővel elválaszthatja az értékkészleteket, hogy különböző átmeneteket hajtson végre különböző tulajdonságokon:

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

Az értékek sorrendje többnyire nem számít - hacsak nincs megadva késés. Ha megad egy késést, akkor először meg kell adnia egy időtartamot. Az első érték, amelyet a böngésző érvényes időértékként ismer fel, mindig az időtartamot fogja képviselni. Minden későbbi érvényes időértéket késleltetésként értelmezünk.

Egyes tulajdonságok nem vihetők át, mert nem animálható tulajdonságok. Az animálható tulajdonságok teljes listáját lásd a specifikációban.

Az átmenet megadásával magában az elemben határozza meg az átmenetet, amely mindkét irányban bekövetkezik. Vagyis amikor a stílusokat megváltoztatják (pl. Az egérrel az egérrel mozgatva), akkor azok tulajdonságai áttérnek, és amikor a stílusok visszaváltoznak (pl. Kikapcsolva), akkor áttérnek. Például a következő bemutató átmeneteket az egérrel, de nem az egérrel:

Lásd Louis Lazaris (@impressivewebs) Pen zohgt-ját a CodePen-en.

Ez azért történik, mert az átmenet átkerült az :hoverállapotválasztóba, és nincs olyan megfelelő átmenet, amely az elemet közvetlenül :hoverállapot nélkül célozza meg .

Az összes támogató böngésző kompatibilitásához szállító előtagokra van szükség, a szabványos szintaxissal utoljára deklarálva:

.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; )

Az IE10 (az IE első támogatott stabil verziója transition) nem igényli az -ms-előtagot.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.