View source for 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>
   <div class="box"></div>
 </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]]