Á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
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 fentebbSzí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 ); }
Math function
Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation).
function (x: number): number {
}Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation).
function (x: number): number {
}Átmenetek előnézete:
Jelenlegi átmenet:
Jelenlegi átmenet
Lineáris átmenet:
Lineáris átmenet