Difference between revisions of "Animasi dan transisi dengan CSS"

From OnnoWiki
Jump to navigation Jump to search
(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...")
 
Line 1: Line 1:
−
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.
+
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
+
==1. Pengenalan Transisi CSS==
  
−
**Transisi CSS** memungkinkan perubahan nilai properti CSS secara halus selama periode waktu tertentu, bukan perubahan instan.
+
'''Transisi CSS''' memungkinkan perubahan nilai properti CSS secara halus selama periode waktu tertentu, bukan perubahan instan.
  
−
### a. Properti Transisi Utama
+
===a. Properti Transisi Utama===
  
−
- **`transition-property`**: Menentukan properti CSS mana yang akan dianimasikan.
+
* '''`transition-property`''': Menentukan properti CSS mana yang akan dianimasikan.
−
- **`transition-duration`**: Menentukan berapa lama transisi berlangsung.
+
* '''`transition-duration`''': Menentukan berapa lama transisi berlangsung.
−
- **`transition-timing-function`**: Menentukan kecepatan transisi selama durasi.
+
* '''`transition-timing-function`''': Menentukan kecepatan transisi selama durasi.
−
- **`transition-delay`**: Menentukan penundaan sebelum transisi dimulai.
+
* '''`transition-delay`''': Menentukan penundaan sebelum transisi dimulai.
  
−
### b. Contoh Implementasi Transisi
+
===b. Contoh Implementasi Transisi===
  
−
**Struktur HTML:**
+
'''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>
  
−
```html
+
'''CSS (style.css):'''
−
<!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:'''
  
−
```css
+
* 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`.
−
.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 {
+
==2. Pengenalan Animasi CSS==
−
  background-color: #45a049;
 
−
}
 
−
```
 
−
 
  
−
**Penjelasan:**
+
'''Animasi CSS''' memungkinkan elemen untuk mengubah gaya mereka dalam rentang waktu tertentu dengan menggunakan keyframes.
  
−
- 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`.
+
===a. Komponen Utama Animasi===
  
−
## 2. Pengenalan Animasi CSS
+
* '''`@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).
  
−
**Animasi CSS** memungkinkan elemen untuk mengubah gaya mereka dalam rentang waktu tertentu dengan menggunakan keyframes.
+
===b. Contoh Implementasi Animasi===
  
−
### a. Komponen Utama Animasi
+
'''Struktur HTML:'''
  
−
- **`@keyframes`**: Menentukan serangkaian langkah dalam animasi.
+
<!DOCTYPE html>
−
- **`animation-name`**: Menentukan nama animasi yang akan diterapkan.
+
<html lang="id">
−
- **`animation-duration`**: Menentukan durasi animasi.
+
<head>
−
- **`animation-timing-function`**: Menentukan kecepatan animasi selama durasi.
+
  <meta charset="UTF-8">
−
- **`animation-delay`**: Menentukan penundaan sebelum animasi dimulai.
+
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
- **`animation-iteration-count`**: Menentukan berapa kali animasi akan diulang.
+
  <title>Contoh Animasi CSS</title>
−
- **`animation-direction`**: Menentukan arah animasi (misalnya, normal, reverse, alternate).
+
  <link rel="stylesheet" href="style.css">
 +
</head>
 +
<body>
 +
  <div class="box"></div>
 +
</body>
 +
</html>
  
−
### b. Contoh Implementasi Animasi
+
'''CSS (style.css):'''
  
−
**Struktur HTML:**
+
.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;
 +
  }
 +
}
  
  
−
```html
+
'''Penjelasan:'''
−
<!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):**
+
* 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==
−
```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:
 
Untuk mempraktikkan contoh di atas di Ubuntu 24.04 tanpa menggunakan perangkat lunak dari Microsoft, Anda dapat menggunakan alat berikut:
  
−
### a. Editor Teks
+
===a. Editor Teks===
  
−
- **Gedit**: Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
+
* '''Gedit''': Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
  
−
  **Instalasi Gedit:**
+
'''Instalasi Gedit:'''
  
−
 
+
sudo apt update
−
```bash
+
sudo apt install gedit
−
  sudo apt update
 
−
  sudo apt install gedit
 
−
  ```
 
−
 
  
−
  **Menjalankan Gedit:**
+
'''Menjalankan Gedit:'''
  
−
 
+
gedit
−
```bash
 
−
  gedit
 
−
  ```
 
−
 
  
−
- **Nano**: Editor teks berbasis terminal yang ringan dan mudah digunakan.
+
* '''Nano''': Editor teks berbasis terminal yang ringan dan mudah digunakan.
  
−
  **Instalasi Nano:**
+
'''Instalasi Nano:'''
  
−
 
+
sudo apt update
−
```bash
+
sudo apt install nano
−
  sudo apt update
 
−
  sudo apt install nano
 
−
  ```
 
−
 
  
−
  **Menjalankan Nano:**
+
'''Menjalankan Nano:'''
  
 +
nano nama_file.html
 
    
 
    
−
```bash
+
* '''Bluefish''': Editor teks yang ditujukan untuk pemrograman dan pengembangan web.
−
  nano nama_file.html
 
−
  ```
 
−
 
−
 
 
−
- **Bluefish**: Editor teks yang ditujukan untuk pemrograman dan pengembangan web.
 
  
−
  **Instalasi Bluefish:**
+
'''Instalasi Bluefish:'''
  
−
 
+
sudo apt update
−
```bash
+
sudo apt install bluefish
−
  sudo apt update
 
−
  sudo apt install bluefish
 
−
  ```
 
−
 
  
−
  **Menjalankan Bluefish:**
+
'''Menjalankan Bluefish:'''
  
−
 
+
bluefish
−
```bash
 
−
  bluefish
 
−
  ```
 
−
 
  
−
### b. Browser Web
+
===b. Browser Web===
  
 
Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia:
 
Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia:
  
−
- **Firefox**: Browser default di Ubuntu.
+
* '''Firefox''': Browser default di Ubuntu.
  
−
  **Instalasi Firefox:**
+
'''Instalasi Firefox:'''
  
−
 
+
sudo apt update
−
```bash
+
sudo apt install firefox
−
  sudo apt update
 
−
  sudo apt install firefox
 
−
  ```
 
−
 
  
−
  **Menjalankan Firefox:**
+
'''Menjalankan Firefox:'''
−
 
 
−
 
 
−
```bash
 
−
  firefox
 
−
  ```
 
−
 
  
−
- **Chromium**: Versi sumber terbuka dari Google Chrome.
+
firefox

Revision as of 13:27, 6 April 2025

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
Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Animasi_dan_transisi_dengan_CSS&oldid=72366"