Cara Menggunakan Property animation-timing-function Pada CSS

Halo teman-teman di kesempatan kali ini saya akan menjelaskan mengenai Cara Menggunakan Property animation-timing-function Di CSS.

Property animation-timing-function digunakan bagi menentukan waktu atau kecepatan bagaimana animasi akan berfungsi atau bergerak lebih dari satu siklus durasi, yang memungkinkan kita bagi merubah kecepatannya.

animation-timing-function di CSS pun  bermanfaat bagi melonggarkan atau memperlambat manfaat animasi, kalau teman-teman mengaplikasikan beberapa animasi atau function di sebuah unsur. Teman-teman dapat pun menentukan berapa lama durasi animasi atau function tersebut berfungsi yang akan dibantu pun oleh tag animation name property.

Kegunaan pengaturan waktu yang kita tentukan berlaku bagi setiap interasi dan animasi, dan tak seluruh animasi secara penuh. Selaku contoh kalau teman-teman mempunyai animasi yang animation-timing-function-nya yakni ease-in-out, dan animation-iteration-count: 2. itu akan mempermudah di awal, dan mempermudah bagi keluar dikala mendekati ahir iterasi pertama-tama, kemudahan pada di awal iterasi kedua, dan kemudahan keluar lagi dikala mendekati ahir animasi.

Bagi animasi keyframed, manfaat waktu berlaku antara keyframes bukan atas seluruh animasi. Dengan kata lain, manfaat waktu diaplikasikan di awal keyframe dan di ahir keyframe.

Selain mampu menentukan manfaat waktu bagi animasi secara keseluruhan, Sahabat dapat menentukan manfaat animasi waktu bagi keyframe individu animasi pada aturan keyframe yang digunakan bagi menghidupkan unsur di keyframe yang seperti itu dilanjutkan ke keyframe berikutnya.

Penulisan Syntax:

• animation-timing-function: <timing-function>




• Element yang digunakan: ::before dan ::after pseudo-element

Contoh Pemakaian:

.element {
    animation-name: rotate, fall;
    animation-timing-function: ease-in, ease-in-out;
}

Contoh Animasi Membangun Bounce:

Contoh berikut berlaku animation-timing-function bagi keyframes individu di pada aturan @keyframes:

@keyframes bounce {
  from {
    top: 100px;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

Gampang ya teman-teman. Semoga bermanfaat

Sumber https://kursuswebsite.org