Geçiş Fonksiyonları Hızlı Başvuru

Geçiş Fonksiyonları bir parametrenin zaman çizelgesinde değişim oranını kontrol eder.

Gerçek hayatta objeler hareket etmeye birden başlayıp durmazlar ve neredeyse hiçbir zaman sabit hızda ilerlemezler. Bir çekmeceyi açarken önce hızlıca çekeriz ve açıldıkça yavaşlatırız. Yere bir şey attığınızda önce aşağı doğru hızlanır ve sonra yere çarparak seker.

Bu site size doğru geçiş fonksiyonunu seçmenizde yardımcı olur.

Açık kaynak
Siteyi dilinize çevirmeye yardımcı olun.
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
CSS içindeki `transition` ve `animation` değerleri geçiş fonksiyonunu seçmenizi sağlar.
.block {
	transition: transform 0.6s ;
}
cubic-bezier.com sitesinde düzenle.
CSS içinde, bu fonksiyon @keyframes kullanılarak uygulanabilir.:
Boyut
Yükleniyor...
Pozisyon
Yükleniyor...
Şeffaflık
Yükleniyor...
PostCSS
PostCSS'de, hareket hızı işlevini tanımlamak çok daha kolaydır. Bu siteden geçiş bilgilerini alan bir postcss-easings eklentisi vardır.
.block {
	transition: transform 0.6s ;
}
Bu beyan, yukarıda anlatılana dönüştürülür.
Maalesef, hareket hızı işlevi herhangi bir PostCSS eklentisiyle ayarlanamaz. @Keyframes ile yapılabilir, yukarıya bakın.
Geçiş
postcss-easing-gradients kullanarak bir geçiş çizmek mümkündür.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Matematik fonksiyonu
Aşağıda bu hareket hızı işlevinin TypeScript ile yazılmış kodunu görüyorsunuz. X değişkeni, animasyonun mutlak ilerlemesini temsil eder 0 (animasyonun başlangıcı) ve 1 (animasyonun sonu) sınırlarında.
function (x: number): number {
}
Aşağıda bu hareket hızı işlevinin TypeScript ile yazılmış kodunu görüyorsunuz. X değişkeni, animasyonun mutlak ilerlemesini temsil eder 0 (animasyonun başlangıcı) ve 1 (animasyonun sonu) sınırlarında.
function (x: number): number {
}
Değişiklikler için geçişi kontrol edin:
Bu fonksiyon:
Bu fonksiyon
Doğrusal fonksiyon:
Doğrusal fonksiyon