Cara Menggunakan Property animation-timing-function Pada CSS

Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang Cara Menggunakan Property animation-timing-function Pada CSS.

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

animation-timing-function pada CSS juga  berguna untuk melonggarkan atau memperlambat fungsi animasi, jika teman-teman menerapkan beberapa animasi atau function pada sebuah elemen. Teman-teman dapat juga menentukan berapa lama durasi animasi atau function tersebut berfungsi yang akan dibantu juga oleh tag animation name property.

Fungsi pengaturan waktu yang kita tentukan berlaku untuk setiap interasi dan animasi, dan tidak seluruh animasi secara penuh. Sebagai contoh jika teman-teman memiliki animasi yang animation-timing-function-nya adalah ease-in-out, dan animation-iteration-count: 2. itu akan memudahkan di awal, dan memudahkan untuk keluar saat mendekati akhir iterasi pertama, kemudahan dalam pada awal iterasi kedua, dan kemudahan keluar lagi saat mendekati akhir animasi.
Untuk animasi keyframed, fungsi waktu berlaku antara keyframes bukan atas seluruh animasi. Dengan kata lain, fungsi waktu diterapkan pada awal keyframe dan pada akhir keyframe.

Selain mampu menentukan fungsi waktu untuk animasi secara keseluruhan, Anda dapat menentukan fungsi animasi waktu untuk keyframe individu animasi dalam aturan keyframe yang digunakan untuk menghidupkan elemen 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 Membuat Bounce:

Contoh berikut berlaku animation-timing-function untuk keyframes individu di dalam 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;
  }
}

Mudah ya teman-teman. Semoga bermanfaat

The post Cara Menggunakan Property animation-timing-function Pada CSS appeared first on Kursus Website Terbaik.