Transitions

CSS TRANSITIONS

CSS transition adalah format CSS yang memberikan efek smooth atau lembut pada sebuah element

Property apa saja yang ada pada CSS Transition?

CSS Transitions memiliki beberapa property yaitu

  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Semua property ini bisa digabung menjadi satu yaitu dengan sebuah shorthand sebagai berikut

transition: {(property) (duration) (delay) (timing-function)}

Pembahasan Property CSS Transition

  • transition-delay tujuan: menunda element saat akan melakukan transisi Contoh Penggunaan
div {
  transition-delay: 1.2s;
  /* Penggunaan waktu delay sesuai kebutuhan */
}
  • transtion-duration tujuan: untuk mengatur waktu suatu element Contoh Penggunaan
div {
  transition-duration: 3s;
  /* Penggunaan durasi bebas sesuai kebutuhan */
}
  • transition-property tujuan: untuk mengatur animasi css Contoh Penggunaan
div {
  /* Yang sering digunakan */
  /* Pilih salah satu  */
  transition-property: all;
  transition-property: none;
  transition-property: margin-left;
  transition-property: margin-right;
}
  • transition-timing-function tujuan: menentukan kurva kecepatan efek transisi Contoh Penggunaan
div {
  /* 1. (ease) Merupakan timing Default */
  transition-timing-function: ease;

  /* 2.(linear) kecepatan sama dari awal hingga akhir */
  transition-timing-function: linear;

  /* 3. (ease-in) kecepatan lambat di awal */
  transition-timing-function: ease-in;

  /* 4. (ease-out) merupakan kebalikan dari (ease-in). (ease-out) kecepatan lambat di akhir */
  transition-timing-function: ease-out;

  /* 5. (ease-in-out) merupakan gabungan dari (ease-in) dan (ease-out).(ease-in-out) kecepatan awal dan akhir lambat */
  transition-timing-function: ease-in-out;

  /* (cubic-bezier(n,n,n,n)) kecepatan bisa diatur sendiri sesuai kebutuhan */
  transition-timing-function: cubic-bezier(n, n, n, n);
}

Referensi : (https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp), (https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)

← Transform
Image Filter →