Belajar CSS Transition Timing Function dan Easing

Efek transisi halus dalam desain web sering kali menjadi pembeda antara tampilan profesional dan tampilan yang terasa “kaku”. Dengan CSS transition dan easing, kamu dapat membuat perubahan visual yang lembut dan menarik perhatian tanpa harus menggunakan JavaScript. Artikel ini akan membahas secara menyeluruh tentang CSS transition timing function dan easing, serta memberikan contoh, kode, dan tips agar kamu bisa menguasai konsep ini sepenuhnya.

Baca juga: Membuat Efek Gradient Bergerak Menggunakan CSS

Apa Itu CSS Transition?

CSS transition adalah fitur dalam CSS yang memungkinkan perubahan nilai properti terjadi secara bertahap, bukan langsung. Dengan menggunakan transisi, ketika elemen berubah (misalnya saat hover), peralihan warnanya tidak langsung berubah, tetapi berjalan dengan kecepatan tertentu sesuai waktu yang ditentukan.

Contoh sederhana:

button {
    background-color: #3498db;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2ecc71;
}Code language: CSS (css)

Ketika pointer diarahkan ke tombol, warna biru berubah menjadi hijau secara halus berkat transition.

Properti Dasar CSS Transition

Untuk memahami transisi dengan baik, kamu harus tahu empat properti utama dalam CSS transition:

Contoh lengkap:

.card {
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}Code language: CSS (css)

Atau dalam bentuk shorthand:

.card {
    transition: all 0.5s ease-in-out 0s;
}Code language: CSS (css)

Memahami Transition Timing Function (Easing CSS)

Bagian paling menarik dari transisi adalah bagaimana kecepatan perubahan terjadi. Di sinilah transition-timing-function atau easing CSS berperan.

Easing CSS menentukan laju perubahan nilai selama durasi transisi. Artinya, kamu bisa mengontrol apakah animasi dimulai cepat lalu melambat, atau sebaliknya.

Jenis-Jenis Easing di CSS

Berikut daftar fungsi easing bawaan dalam CSS:

Contoh Visual Easing CSS

Contoh penggunaan beberapa timing function:

.box {
    width: 100px;
    height: 100px;
    background: #3498db;
    transition: transform 2s;
}

.box.ease       { transition-timing-function: ease; }
.box.linear     { transition-timing-function: linear; }
.box.ease-in    { transition-timing-function: ease-in; }
.box.ease-out   { transition-timing-function: ease-out; }
.box.ease-in-out{ transition-timing-function: ease-in-out; }

.box:hover {
    transform: translateX(300px);
}Code language: CSS (css)

HTML-nya:

<div class="box ease"></div>
<div class="box linear"></div>
<div class="box ease-in"></div>
<div class="box ease-out"></div>
<div class="box ease-in-out"></div>Code language: HTML, XML (xml)

Cobalah sendiri — kamu akan melihat perbedaan pola gerak yang sangat mencolok antara satu easing dan lainnya.

Menyesuaikan Easing dengan cubic-bezier()

Jika kamu ingin kontrol penuh terhadap pola kecepatan animasi, gunakan fungsi cubic-bezier(x1, y1, x2, y2).

Contoh penggunaan cubic-bezier:

Contoh:

.element {
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.element:hover {
    transform: translateY(-30px);
}Code language: CSS (css)

Nilai-nilai angka tersebut mewakili kurva bezier 4 titik kontrol yang mengatur percepatan dan perlambatan animasi. Kamu dapat membuat kurvamu sendiri dengan alat online seperti https://cubic-bezier.com.

Konsep Dasar Timing Function

Untuk memahami bagaimana easing bekerja, perhatikan bahwa fungsi timing mengontrol persentase perubahan terhadap waktu.

Misalnya:

• ease-in: grafik cenderung lambat di awal, lalu menanjak cepat di akhir.
• ease-out: grafik menurun cepat di awal, lalu melambat.
• linear: grafik berbentuk garis lurus.

Setiap fungsi easing pada dasarnya menggambarkan kurva seperti ini:

ease-in       = lambat → cepat
ease-out      = cepat → lambat
ease-in-out   = lambat → cepat → lambat

Contoh CSS Transition dalam Interaksi Pengguna

Hover Efek Tombol dengan Easing

button {
    padding: 12px 24px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.4s ease-in-out, transform 0.3s ease-in;
}

button:hover {
    background-color: #c0392b;
    transform: scale(1.1);
}Code language: CSS (css)

Efek di atas menghasilkan tombol yang membesar perlahan saat diarahkan pointer, menciptakan sensasi “responsif dan lembut”.

Card Hover dengan Shadow dan Transform

.card {
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}Code language: CSS (css)

Perpaduan transform dan ease menciptakan transisi lembut seperti efek “mengambang” saat pengguna hover.

Berikut ini adalah hasil visual dari ketiga efek diatas.

Menggunakan Delay dan Duration

Properti transition-duration dan transition-delay mengatur lamanya dan kapan transisi mulai.

Contoh:

.image {
    opacity: 0.5;
    transition: opacity 1s ease-in-out 0.3s;
}

.image:hover {
    opacity: 1;
}Code language: CSS (css)

Artinya:

• Efek transisi berlangsung selama 1 detik.
• Dimulai setelah 0.3 detik setelah hover terjadi.

Kombinasi Beberapa Properti Transition

Kamu bisa menerapkan efek transisi ke beberapa properti sekaligus.

.box {
    width: 100px;
    height: 100px;
    background: #9b59b6;
    transition: width 0.5s ease, height 0.5s ease-in, background-color 0.5s ease-out;
}

.box:hover {
    width: 120px;
    height: 120px;
    background: #8e44ad;
}Code language: CSS (css)

Menggabungkan Transition dengan Transform dan Opacity

Untuk membuat efek lebih kompleks, transisi sering digabungkan dengan transform dan opacity.

.card {
    opacity: 0.7;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.6s ease-in-out;
}

.card:hover {
    opacity: 1;
    transform: scale(1.05);
}Code language: CSS (css)

Hasilnya: elemen terlihat “fade in” dan membesar dengan halus.

Perbedaan CSS Transition vs CSS Animation

Gunakan transition untuk efek interaktif sederhana dan animation untuk efek kompleks yang berulang.

Kesimpulan

Dengan memahami CSS transition timing function dan easing, kamu dapat membuat efek animasi yang terasa lembut, natural, dan interaktif. Penggunaan transisi bukan sekadar untuk estetika, tetapi juga meningkatkan pengalaman pengguna (UX).

Hal penting yang perlu diingat:

• Gunakan transition: all 0.3s ease; untuk efek umum.
• Pilih fungsi easing sesuai konteks — ease-out untuk hover, ease-in untuk muncul.
• Gunakan cubic-bezier untuk kontrol tingkat lanjut.
• Hindari transisi terlalu lama agar tidak mengganggu interaksi.

Dengan latihan dan eksperimen, kamu akan memahami karakter tiap timing function CSS dan bisa membuat efek transisi yang profesional seperti desainer front-end berpengalaman.