Contekan Fungsi Easing

Fungsi easing menentukan laju perubahan sebuah parameter dari waktu ke waktu.

Objek pada kehidupan nyata tidak bergerak dan berhenti dalam sekejap, dan hampir tidak pernah bergerak pada kecepatan konstan. Ketika kita membuka laci, pertama kita lakukan secara cepat lalu pelan setelah hampir keluar. Menjatuhkan benda ke lantai, pertama akan ke bawah kemudian memantul kembali.

Halaman ini membantu anda memilih fungsi easing yang tepat.

Sumber Terbuka
Bantu terjemahkan situs ini ke bahasa anda.
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
Di CSS, properti transisi dan animasi memungkinkan anda untuk memilih menentukan fungsi easing.
.block {
	transition: transform 0.6s ;
}
Di CSS, fungsi ini dapat diimplementasikan dengan @keyframes:
Ukuran
Memuat...
Posisi
Memuat...
Transparansi
Memuat...
PostCSS
Di PostCSS, fungsi easing ini lebih mudah digunakan. Terdapat plugin postcss-easings yang memudahkan untuk mengambil informasi tentang transisi dari website tersebut.
.block {
	transition: transform 0.6s ;
}
Deklarasinya diubah menjadi seperti diatas ini.
Sayangnya, fungsi easing ini tidak dapat digunakan dengan PostCSS plugin apapun. Tetapi dapat diselesaikan dengan @keyframes, lihat diatas.
Gradien
Memungkinkan untuk membuat gradien dengan menggunakan postcss-easing-gradients.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Fungsi matematika
Dibawah ini kamu melihat kode untuk fungsi easing ini yang ditulis dengan TypeScript. Variabel x merepresentasikan proses animasi yang absolut diantara 0 (awal dari animasi) dan 1 (akhir dari animasi).
function (x: number): number {
}
Dibawah ini kamu melihat kode untuk fungsi easing ini yang ditulis dengan TypeScript. Variabel x merepresentasikan proses animasi yang absolut diantara 0 (awal dari animasi) dan 1 (akhir dari animasi).
function (x: number): number {
}
Cek perubahan easing:
Fungsi ini:
Fungsi ini
Fungsi linear:
Fungsi linear