Ściąga z Funkcji Przejścia

Funkcje przejścia zadaj tempo zmian parametru w czasie.

Obiekty w prawdziwym życiu nie ruszają i nie zatrzymują się natychmiastowo i prawie nigdy nie poruszają się ze stałą prędkością. Kiedy wysuwamy szufladę, najpierw nadajemy jej energiczny, szybki ruch, zaś kiedy już się wysuwa, spowalniamy ją. Upuść coś na podłogę, a to najpierw zacznie przyspieszać w dół, po czym, gdy trafi w podłogę, odbije się od niej z powrotem.

Ta strona pomaga wybrać Ci odpowiednią funkcję przejścia.

Open Source
Pomóż przetłumaczyć stronę na twój język!
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
W CSS-ie, takie właściwości jak przemiana (transition) oraz animacja (animation) pozwalają na określenie dla nich funkcji przejścia.
.block {
	transition: transform 0.6s ;
}
Edytuj na cubic-bezier.com.
W CSS-ie, taka funkcja może zostać zaimplementowana za pomocą @keyframes:
Rozmiar
Ładowanie...
Pozycja
Ładowanie...
Przezroczystość
Ładowanie...
PostCSS
Funkcje przejścia są znacznie łatwiejsze do opisania w PostCSS. Istnieje plugin postcss-easings, który pobiera informacje o przejściach z tejże strony.
.block {
	transition: transform 0.6s ;
}
Tamta deklaracja została skonwertowana do tej opisanej powyżej.
Niestety nie można ustawić funkcji przejścia za pomocą żadnego pluginu do PostCSS-a. Zobacz powyżej, jak można to zrobić przy użyciu @keyframes.
Gradient
Można narysować gradient przy użyciu postcss-easing-gradients.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Funkcje matematyczne
Poniżej widzisz kod dla funkcji przejścia napisany w TypeScriptcie. Zmienna x odzwierciedla absolutny postęp animacji w zakresie od 0 (początek animacji) do 1 (koniec animacji).
function (x: number): number {
}
Poniżej widzisz kod dla funkcji przejścia napisany w TypeScriptcie. Zmienna x odzwierciedla absolutny postęp animacji w zakresie od 0 (początek animacji) do 1 (koniec animacji).
function (x: number): number {
}
Sprawdź, jaką zmianę daje to przejście:
Ta funkcja:
Ta funkcja
Funkcja liniowa:
Funkcja liniowa