Cara membuat efek transition dengan CSS

Pada CSS3 terdapat fitur baru yaitu properti transition. Properti ini berguna untuk menghasilkan efek

Kegunaan CSS transition

Pada CSS3 terdapat fitur baru yaitu properti transition. Properti ini berguna untuk menghasilkan efek transisi pada elemen HTML. Sebagai contoh Anda mengubah warna latar belakang disaat mouse berada dielemen tersebut, proses efek transisi akan terjadi dalam waktu yang ditentukan. 

Dalam skenario normal, warna latar belakang berubah langsung dari nilai properti lama ke nilai properti baru. Namun dengan adanya properti transition Anda bisa mengatur proses transisi perubahannya.

Transition-property

Properti transition-property digunakan untuk menentukan nama properti css mana yang akan digunakan untuk membuat sebuah transisi. Untuk membuat transisi bekerja, Anda harus menentukan setidaknya dua properti pada transisi, yaitu properti transition-property dan transition-duration.

Transition-duration

Dengan properti transition-duration Anda bisa menggunakannya untuk menentukan berapa detik atau milidetik yang diperlukan untuk menyelesaikan efek transisi ( 5s untuk 5 detik dan 0.5 untuk 0,5 milidetik ).

#transisi {
    width: 150px;
    height: 100px;
    background: blue;
    transition-property: width;
    transition-duration: 5s;
}
#transisi:hover {
    width: 300px;
}
Catatan: Agar transisi bekerja, Anda harus menentukan setidaknya dua properti pada transisi, yaitu properti transition-property dan transition-duration.

Transition-delay

Dengan properti transition-delay Anda bisa menggunakannya untuk menentukan berapa detik atau milidetik yang diperlukan untuk penundaan efek transisi ( 5s untuk 5 detik dan 0.5 untuk 0,5 milidetik ).

#transisi {
    width: 150px;
    height: 100px;
    background: blue;
    transition-property: width;
    transition-duration: 5s;
    transition-delay: 2s;
}
#transisi:hover {
    width: 300px;
}

Transition-timing-function

Dengan properti transition-timing-function Anda bisa menggunakannya untuk menentukan kurva kecepatan efek transisi.

Properti transition-timing-function dapat memiliki nilai berikut:

  • ease – menentukan efek transisi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (ini adalah default)
  • linear – menentukan efek transisi dengan kecepatan yang sama dari awal sampai akhir
  • ease-in – menentukan efek transisi dengan awal yang lambat
  • ease-out – menentukan efek transisi dengan akhir yang lambat
  • ease-in-out – menentukan efek transisi dengan awal dan akhir yang lambat
  • cubic-bezier(n,n,n,n) – memungkinkan Anda menentukan nilai-nilai Anda sendiri dalam fungsi kubik-bezier
div {
    width: 150px;
    height: 100px;
    background: yellow;
    border: 1px solid #aaa;
    margin-bottom: 15px;
    transition-property: width;
    transition-duration: 2s;
}
#linear {
    transition-timing-function: linear;
}
#ease {
    transition-timing-function: ease;
}
#ease-in {
    transition-timing-function: ease-in;
}
#ease-out {
    transition-timing-function: ease-out;
}
#ease-in-out {
    transition-timing-function: ease-in-out;
}
div:hover {
    width: 300px;
}

Transition shorthand

Dengan transition shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti transition dalam satu properti tunggal.

Untuk menggunakan transition shorthand Anda cukup menggunakan properti transition. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan transition-* individu.

Properti transition shorthand berlaku untuk transition dibawah ini:

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function
#transisi {
    width: 150px;
    height: 120px;
    background: blue;
    transition: width 2s;
}
#transisi:hover {
    width: 250px;
}

Transition multi

Mungkin Anda ingin membuat sebuah efek transisi lebih dari satu. Agar kode Anda menjadi lebih pendek Anda bisa membuat efek transisi digabungkan langsung dengan cara dipisahkan koma.

#transisi {
    width: 150px;
    height: 100px;
    background: blue;
    transition-property: width, background;
    transition-duration: 3s;
}
#transisi:hover {
    width: 300px;
    background: yellow;
}

Daftar properti transition

PropertiKegunaanya
transitionMengatur semua properti transition dalam satu deklarasi
transition-propertyMenentukan nama properti CSS untuk efek transisi
transition-durationMengatur berapa detik atau milidetik yang diperlukan untuk menyelesaikan efek transisi
transition-delayMengatur penundaan (dalam detik atau milidetik) untuk efek transisi
transition-timing-functionMengatur kurva kecepatan efek transisi