Az animation-timing-function tulajdonság

A animation-timing-function tulajdonság beállítja az animáció változási sebességét (gyorsulását). Például először lassan, aztán gyorsan, majd ismét lassan, stb.

Szintaxis

cssselector {
  animation-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 `animation-duraton`-ban van beállítva, majd aztán 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 blokkokra, hogy láthassa az összes időfüggvény típus működését:

Lásd még

a animation tulajdonság,
amely egy animációkra vonatkozó rövidített tulajdonság
a @keyframes parancsot,
amely az animáció kulcsképeit határozza meg
a sima átmeneteket transition, amelyek egy elem fölé húzásra történő animációt jelentenek