A transition-timing-function tulajdonság

A transition-timing-function tulajdonság beállítja a változás sebességét (gyorsulását) a transition sima átmenetének. Például, először lassan, aztán gyorsan, majd ismét lassan stb.

Szintaxis

cssszelektor {
  transition-timing-function: érték;
}

Értékek

Érték	Leírás
`ease`	Először lassan, aztán gyorsan, a végén ismét lassan.
`ease-in`	Lassan kezdődik és fokozatosan gyorsul.
`ease-out`	Gyorsan kezdődik és fokozatosan lassul.
`ease-in-out`	Először lassan, aztán gyorsan, a végén ismét lassan. Az easetől a sebesség különbözteti meg.
`linear`	Mindig ugyanaz a sebesség.
`step-start`	Nincs animáció, a tulajdonság azonnal felveszi a végső értéket.
`step-end`	Nincs animáció, a tulajdonság megvárja az időt, amely a `transition-duraton`-ban van beállítva, majd azonnal felveszi a végső értéket.
`steps`	A tulajdonság értéke ugrásszerűen változik.
`cubic-bezier`	Bezier-görbe, amely tetszőleges animációt határozhat meg. Lásd: Bezier-görbe generátor.

Alapértelmezett érték: ease.

Különböző értékek összehasonlítása

Húzza az egeret az alábbi blokkok fölé, hogy lássa az összes időfüggvény típus működését:

Példa

Húzza az egeret a blokk fölé - az simán megváltoztatja a szélességét 2 másodperc alatt. Mivel be van állítva az ease-in érték, az animáció lassan indul és fokozatosan gyorsul:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Lásd még

a transition-duration tulajdonság,
amely beállítja az átmenet időtartamát
a transition-property tulajdonság,
amely beállítja a tulajdonság nevét az átmenethez
a transition-delay tulajdonság,
amely beállítja a késleltetést az átmenet előtt
a transition tulajdonság,
amely az átmenet rövidítése
a animation tulajdonság,
amely animációt készíthet