Animation Timing Function merupakan kurva kecepatan suatu animasi. kurva ini bertujuan untuk mengatur kecepatan animasi awal sampai akhir. Ada yang lambat di awal kemudiaan semakin cepat, ada yang cepat di awal yang kemudian semakin lambat, ada juga yang lambat di awal dan di akhir tapi cepat di pertengahan.

  • ease : lambat di awal, kemudian cepat, dan kembali melambat diakhir
  • ease-in : lambat di awal.
  • ease-out : lambat di akhir.
  • ease-in-out : lambat di awal dan di akhir.
  • linear : kecepatan sama dari awal hingga akhir.
  • Berikut ini contoh penulisan kode pada animation timing function ease:

    Berikut ini beberapa contoh animation timing function ang anda dapat gunakan:

    Ease
    Ease-in
    Ease-out
    Ease-in-out
    Linear

    Lihat juga penggunaan animation-timing-function ini pada pembuatan animasi fade-in dan juga animasi pindah tempat

    Sekian, Semoga bermanfaat