Átmeneti Függvények Gyűjteménye

Átmeneti függvények (easing functions) meghatározzák egy paraméter időbeli változásának mértékét.

A valódi tárgyak sem csak állandó sebességgel mozognak, nem indulnak, nem állnak meg hirtelen, azonnal. A fiók kinyitásakor is először gyorsuló mozgással húzzunk, majd fokozatosan lassítjuk addig amíg teljes egészében kijön. Bármilyen tárgyat ledobunk a padlóra, először lefelé kezd el gyorsulni, majd a padlóra érkezés után, (ruganyos test esetén) visszaugrik.

Ez az oldal segít a megfelelő átmeneti függvény kiválasztásában.

Nyílt forrású
Segíts lefordítani ezt az oldalt a saját nyelvedre
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
A CSS-ben az átmenetnek és az animációnak a tulajdonságai lehetővé teszik az átmeneti függvény meghatározását.
.block {
	transition: transform 0.6s ;
}
Szerkesztés a cubic-bezier.com oldalán.
CSS-ben az átmeneti függvények a @keyframes használatával érhetőek el:
Méret
Betöltés...
Pozíció
Betöltés...
Átlátszóság
Betöltés...
PostCSS
A PostCSS-ben az átmeneti függvényeket könnyebb használni, leírni. Ehhez létezik egy postcss-easings plugin, amely tartalmazza az átmeneti információkat erről az oldalról
.block {
	transition: transform 0.6s ;
}
Ezt a meghatározást a PostCSS átalakítja a fent leírtakhoz
Sajnos, ez az átmeneti függvény nem érhető el semmilyen PostCSS pluginban Az átmenet a @keyframes használatával elvégezhető, lásd fentebb
Színátmenet
Lehetőség van színátmenet létrehozására a postcss-easing-gradients segítségével.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Átmenetek előnézete:
Jelenlegi átmenet:
Jelenlegi átmenet
Lineáris átmenet:
Lineáris átmenet