animation-timing-function

Properti CSS animation-timing-function memungkinkan kamu untuk menentukan bagaimana animasi akan berkembang selama satu siklus durasinya.

Lebih detailnya, properti ini menjelaskan bagaimana animasi akan berubah kecepatan selama durasi setiap siklus.

Efek ini diterapkan dengan menggunakan salah satu fungsi pengaturan waktu yang dijelaskan dalam CSS.

Properti animation-timing-function ditentukan dengan menggunakan kurva cubic bezier yang didefinisikan oleh empat titik kontrol: P₀, P₁, P₂, dan P₃.

Poin P₀ dan P₃, yang mewakili awal dan akhir dari siklus animasi, selalu diatur ke (0,0) dan (1,1) secara berulang.

Properti animation-timing-function mencakup sejumlah kata kunci yang dapat digunakan sebagai cara cepat untuk mendapatkan transisi yang bagus.

Atau kamu dapat menggunakan fungsi cubic-bezier() untuk menentukan kurva _cubic-bezier` kamu sendiri.

Untuk animasi keyframes, properti animation-timing-function berlaku antara keyframe, bukan seluruh animasi.

Misalnya, dalam hal fungsi timing ease-in-out, animasi akan melambat pada awal keyframe dan melambat pada akhir keyframe.

animation-timing-function yang didefinisikan dalam blok keyframe berlaku untuk keyframe itu. Jika tidak, fungsi timing yang ditentukan untuk animasi akan digunakan.

Sintax

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end |
steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

Javascript Syntax

object.style.animationTimingFunction="linear"

default animation-timing-function: ease;

Animasi dimulai perlahan, berakselerasi di tengah, dan melambat di akhir.

animation-timing-function: ease-in;

Animasi dimulai perlahan, dan berakselerasi secara bertahap hingga akhir.

animation-timing-function: ease-out;

Animasi dimulai dengan cepat, dan melambat secara bertahap hingga akhir.

animation-timing-function: ease-in-out;

Seperti ease , tetapi lebih jelas.

Animasi dimulai dengan cepat, dan melambat secara bertahap hingga akhir.

animation-timing-function: linear;

Animasi ini memiliki *kecepatan konstan .

animation-timing-function: step-start;

Animasi melompat langsung ke keadaan akhir .

animation-timing-function: step-end;

Animasi tetap berada di keadaan awal hingga akhir, sesaat langsung melonjak ke keadaan akhir .

animation-timing-function: steps(4, end);

Dengan menggunakan steps() dengan integer , kamu dapat menentukan jumlah langkah tertentu sebelum mencapai akhir. Keadaan elemen tidak akan berubah secara bertahap, tetapi sebaliknya lompat dari bagian ke bagian dalam contoh terpisah.

Browser Support

Tabel berikut ini menunjukkan tingkat dukungan browser untuk fitur animasi yang disediakan oleh Caniuse.com.