Belajar CSS Part 8: Transitions & Animations

by

Setelah mempelajari Responsive Design & Media Queries di Part 7, sekarang kita akan mengupas cara membuat elemen web menjadi lebih interaktif dan dinamis dengan: CSS Transitions dan Animations.

Di Part 8 ini, kamu akan belajar tentang:

  • Perbedaan antara Transitions dan Animations
  • Cara menggunakan Transitions untuk efek halus pada perubahan elemen
  • Bagaimana membuat Animasi menggunakan CSS untuk efek dinamis dan kreatif

Apa Itu CSS Transitions?

CSS Transitions adalah fitur dalam CSS yang memungkinkan kita untuk menambahkan efek animasi sederhana dan halus pada perubahan properti suatu elemen HTML. Dengan CSS Transitions, perubahan yang terjadi pada elemen tidak langsung berubah secara tiba-tiba, melainkan berlangsung secara bertahap dalam rentang waktu tertentu.

Misalnya, ketika kita mengubah warna latar belakang, ukuran, posisi, opacity, atau properti lainnya, perubahan tersebut biasanya terjadi secara instan. Namun dengan menambahkan transisi, perubahan itu bisa terlihat lebih lembut dan menarik secara visual. Hal ini membuat tampilan website terasa lebih interaktif dan profesional.

CSS Transitions sering digunakan untuk efek hover pada tombol, menu navigasi, kartu (card), gambar, dan berbagai elemen antarmuka lainnya. Dengan pengaturan durasi, jenis percepatan (timing function), serta properti yang ingin dianimasikan, kita bisa mengontrol bagaimana dan seberapa cepat perubahan tersebut terjadi.

Singkatnya, CSS Transitions membantu meningkatkan pengalaman pengguna (user experience) dengan memberikan efek visual yang lebih nyaman dan tidak kaku saat terjadi perubahan pada elemen di halaman web.

Transisi Dasar

Sintaks dasar dari transition adalah sebagai berikut: 


.element {
  transition: [properti] [durasi] [timing-function] [delay];
}

Misalnya, kita ingin mengubah warna latar belakang elemen ketika pengguna mengarahkan kursor ke elemen tersebut, dengan transisi selama 0.5 detik:

Penjelasan:

  • property → properti yang ingin dianimasikan
  • duration → lama animasi (contoh: 0.5s)
  • timing-function → pola kecepatan (ease, linear, ease-in, dll)
  • delay → waktu tunggu sebelum animasi mulai

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

.button:hover {
  background-color: #2ecc71;
}

Dalam contoh ini, ketika pengguna hover pada elemen dengan kelas .button, warna latar belakang akan berubah secara bertahap selama 0.5 detik.

Contoh HTML Lengkap: background-color Transition

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Transition</title>
</head>
<body>

  <button class="button">Hover Saya</button> 
  <button class="button">Hover Lagi!</button>

</body>
</html>

Apa Itu CSS Animations?

CSS Animations memungkinkan kita untuk membuat animasi yang lebih kompleks dan dinamis pada elemen.

Berbeda dengan Transitions yang terjadi saat properti berubah, animasi dapat berulang dan dapat mengontrol beberapa perubahan properti secara bersamaan.

Animasi Dasar

Sintaks dasar untuk @keyframes dan animation adalah sebagai berikut: 


@keyframes nama-animasi {
  from {
    [properti]: [nilai_awal];
  }
  to {
    [properti]: [nilai_akhir];
  }
}

.element {
  animation: nama-animasi [durasi] [timing-function] [delay] [iteration-count];
}

Contoh animasi sederhana untuk membuat elemen bergerak dari kiri ke kanan: 


@keyframes moveRight {
  from {
    left: 0;
  }
  to {
    left: 100px;
  }
}

.element {
  position: relative;
  animation: moveRight 2s ease-in-out infinite;
}

Di sini, elemen akan bergerak dari kiri ke kanan dalam waktu 2 detik, dan pergerakan ini akan terus berulang karena kita menggunakan infinite.

Contoh HTML Lengkap: Animasi Dasar bergerak

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Animasi Dasar</title>
</head>
<body>

  <div class="element"></div>

</body>
</html>

Penjelasan Properti Animation

animation: moveRight 2s ease-in-out infinite alternate;
  • moveRight → nama animasi
  • 2s → durasi 2 detik
  • ease-in-out → gerakan halus
  • infinite → berulang tanpa batas
  • alternate → bolak-balik (tidak reset ke awal)

Properti- properti Penting dalam Transitions & Animations

1. transition

Properti transition memiliki beberapa nilai yang bisa disesuaikan:

  • transition-property: Properti CSS yang ingin diubah (misalnya, background-color, opacity)
  • transition-duration: Durasi transisi (misalnya, 1s atau 500ms)
  • transition-timing-function: Fungsi waktu untuk menentukan bagaimana transisi berlangsung (misalnya, ease, linear)
  • transition-delay: Waktu tunggu sebelum transisi dimulai

2. animation

Properti animation memiliki beberapa nilai yang bisa disesuaikan:

  • animation-name: Nama animasi yang ingin digunakan (misalnya, moveRight)
  • animation-duration: Durasi animasi (misalnya, 2s)
  • animation-timing-function: Fungsi waktu untuk animasi (misalnya, ease-in-out)
  • animation-delay: Waktu tunggu sebelum animasi dimulai
  • animation-iteration-count: Jumlah berapa kali animasi diulang (misalnya, infinite)
  • animation-direction: Arah animasi (misalnya, normal, reverse)

Contoh Menggunakan Transitions dan Animations Bersama

Berikut adalah contoh penggunaan Transitions dan Animations secara bersamaan: 


.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: background-color 0.5s ease;
  animation: moveRight 2s ease-in-out infinite;
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

Contoh HTML Lengkap: Transition + Animation

<!DOCTYPE html>
<html>
<head>
  <title>Transition + Animation</title>
</head>
<body>

  <div class="element"></div>

</body>
</html>

Penjelasan singkat

  1. Kotak bergerak bolak-balik otomatis (animation)
  2. Saat diarahkan kursor:
    • Warna berubah halus (transition)
    • Ukuran sedikit membesar (transition)

Dalam contoh ini, elemen akan bergerak dari kiri ke kanan menggunakan animasi moveRight, dan akan mengubah warna latar belakang secara bertahap menggunakan transisi saat pengguna hover.

Kesalahan Umum dalam Transitions & Animations

  • Penggunaan animasi yang terlalu berlebihan, mengganggu pengalaman pengguna
  • Waktu animasi yang terlalu cepat atau terlalu lambat, membuat animasi kurang jelas
  • Lupa mengatur properti animation-fill-mode untuk kontrol animasi setelah selesai

Ringkasan CSS Part 8

  • Gunakan Transitions untuk perubahan halus pada properti elemen
  • Gunakan Animations untuk membuat efek dinamis dan kompleks
  • Pastikan transisi dan animasi tidak mengganggu pengalaman pengguna

Lanjutan Materi

Di CSS Part 9, kita akan membahas:

  • CSS Flexbox dan Grid secara lebih mendalam
  • Bagaimana menggunakan Transitions & Animations dalam layout lebih kompleks

Leave a Comment

Responsive — 100%