Unknown user: /* b. Browser Web */

2025-04-06T11:34:36Z

b. Browser Web

← Older revision		Revision as of 11:34, 6 April 2025
Line 165:		Line 165:

	firefox		firefox


			==Pranala Menarik==

			* [[Web Programming]]

Unknown user at 06:27, 6 April 2025

2025-04-06T06:27:23Z

Show changes

Unknown user: Created page with "Untuk modul Animasi dan Transisi dengan CSS dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai konsep dasar animasi dan transisi dalam CSS, beserta cont..."

2025-04-05T08:40:56Z

Created page with "Untuk modul **Animasi dan Transisi dengan CSS** dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai konsep dasar animasi dan transisi dalam CSS, beserta cont..."

New page

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>
<div class="box"></div>
</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.

Animasi dan transisi dengan CSS - Revision history

Unknown user: /* b. Browser Web */

Unknown user at 06:27, 6 April 2025

Unknown user: Created page with "Untuk modul **Animasi dan Transisi dengan CSS** dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai konsep dasar animasi dan transisi dalam CSS, beserta cont..."

Unknown user: Created page with "Untuk modul Animasi dan Transisi dengan CSS dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai konsep dasar animasi dan transisi dalam CSS, beserta cont..."