Tutorial CSS: Animation Timing Function

Home Coding HTML-CSS

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:

      
        .ease {
          animation-timing-function: ease;
        }

      
        <div class="rect move ease">Ease</div>

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