Animasi dan transisi dengan CSS

Untuk modul Animasi dan Transisi dengan CSS dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai konsep dasar animasi dan transisi dalam CSS, beserta contoh implementasi menggunakan alat di Ubuntu 24.04.

1. Pengenalan Transisi CSS

Transisi CSS memungkinkan perubahan nilai properti CSS secara halus selama periode waktu tertentu, bukan perubahan instan.

a. Properti Transisi Utama

`transition-property`: Menentukan properti CSS mana yang akan dianimasikan.
`transition-duration`: Menentukan berapa lama transisi berlangsung.
`transition-timing-function`: Menentukan kecepatan transisi selama durasi.
`transition-delay`: Menentukan penundaan sebelum transisi dimulai.

b. Contoh Implementasi Transisi

Struktur HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Transisi CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="btn">Hover Saya</button>
</body>
</html>

CSS (style.css):

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.btn:hover {
  background-color: #45a049;
}

Penjelasan:

Ketika kursor diarahkan ke tombol (`.btn`), warna latar belakang berubah secara halus dari hijau ke hijau tua selama 0,3 detik dengan efek percepatan dan perlambatan yang ditentukan oleh `ease-in-out`.

2. Pengenalan Animasi CSS

Animasi CSS memungkinkan elemen untuk mengubah gaya mereka dalam rentang waktu tertentu dengan menggunakan keyframes.

a. Komponen Utama Animasi

`@keyframes`: Menentukan serangkaian langkah dalam animasi.
`animation-name`: Menentukan nama animasi yang akan diterapkan.
`animation-duration`: Menentukan durasi animasi.
`animation-timing-function`: Menentukan kecepatan animasi selama durasi.
`animation-delay`: Menentukan penundaan sebelum animasi dimulai.
`animation-iteration-count`: Menentukan berapa kali animasi akan diulang.
`animation-direction`: Menentukan arah animasi (misalnya, normal, reverse, alternate).

b. Contoh Implementasi Animasi

Struktur HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Animasi CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

CSS (style.css):

.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  position: relative;
  animation-name: move;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes move {
  0% {
    left: 0px;
  }
  50% {
    left: 200px;
  }
  100% {
    left: 0px;
  }
}

Penjelasan:

Elemen `.box` akan bergerak dari kiri ke kanan sejauh 200px dan kembali ke posisi awal selama 4 detik, diulang tanpa henti.

3. Praktik Menggunakan Alat di Ubuntu 24.04

Untuk mempraktikkan contoh di atas di Ubuntu 24.04 tanpa menggunakan perangkat lunak dari Microsoft, Anda dapat menggunakan alat berikut:

a. Editor Teks

Gedit: Editor teks bawaan GNOME yang sederhana dan mudah digunakan.

Instalasi Gedit:

sudo apt update
sudo apt install gedit

Menjalankan Gedit:

gedit

Nano: Editor teks berbasis terminal yang ringan dan mudah digunakan.

Instalasi Nano:

sudo apt update
sudo apt install nano

Menjalankan Nano:

nano nama_file.html

Bluefish: Editor teks yang ditujukan untuk pemrograman dan pengembangan web.

Instalasi Bluefish:

sudo apt update
sudo apt install bluefish

Menjalankan Bluefish:

bluefish

b. Browser Web

Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia:

Firefox: Browser default di Ubuntu.

Instalasi Firefox:

sudo apt update
sudo apt install firefox

Menjalankan Firefox:

firefox

Pranala Menarik

Web Programming