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 tanpa menggunakan perangkat lunak dari Microsoft.
- 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:**
```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):**
```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:**
```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):**
```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:**
```bash
sudo apt update sudo apt install gedit ```
**Menjalankan Gedit:**
```bash
gedit ```
- **Nano**: Editor teks berbasis terminal yang ringan dan mudah digunakan.
**Instalasi Nano:**
```bash
sudo apt update sudo apt install nano ```
**Menjalankan Nano:**
```bash
nano nama_file.html ```
- **Bluefish**: Editor teks yang ditujukan untuk pemrograman dan pengembangan web.
**Instalasi Bluefish:**
```bash
sudo apt update sudo apt install bluefish ```
**Menjalankan Bluefish:**
```bash
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:**
```bash
sudo apt update sudo apt install firefox ```
**Menjalankan Firefox:**
```bash
firefox ```
- **Chromium**: Versi sumber terbuka dari Google Chrome.