CSS Tutorial untuk Pemula: Belajar CSS Langkah demi Langkah
Selamat datang di tutorial CSS lengkap untuk pemula! CSS, atau Cascading Style Sheets, adalah bahasa yang digunakan untuk menata halaman web HTML. Tanpa CSS, halaman web Anda akan terlihat membosankan dan tidak menarik. Tutorial ini akan membimbing Anda langkah demi langkah, mulai dari dasar hingga topik yang lebih lanjut, sehingga Anda dapat membuat desain web yang menakjubkan.
Mengapa Belajar CSS?
Sebelum kita mulai, mari kita bahas mengapa CSS sangat penting:
- Kontrol Tampilan: CSS memberi Anda kontrol penuh atas tampilan halaman web Anda, termasuk warna, font, tata letak, dan lainnya.
- Konsistensi: Dengan CSS, Anda dapat memastikan konsistensi desain di seluruh situs web Anda.
- Responsif: CSS memungkinkan Anda membuat desain web yang responsif, yang berarti situs web Anda akan terlihat bagus di semua perangkat, dari desktop hingga ponsel.
- Memisahkan Struktur dari Presentasi: CSS memisahkan struktur (HTML) dari presentasi (desain), membuat kode Anda lebih bersih, mudah dikelola, dan lebih mudah untuk diubah.
- SEO (Search Engine Optimization): Struktur kode yang bersih dan terorganisir, dibantu oleh pemisahan HTML dan CSS, dapat meningkatkan SEO situs web Anda.
Kerangka Tutorial
Tutorial ini akan mencakup topik-topik berikut:
- Pengantar CSS: Apa itu CSS, sejarah singkat, dan mengapa penting.
- Cara Menambahkan CSS ke HTML: Inline, Internal, dan Eksternal CSS.
- Sintaks CSS: Selector, Property, dan Value.
- Selector CSS: Elemen, ID, Class, Atribut, Pseudo-classes, dan Pseudo-elements.
- Box Model CSS: Margin, Border, Padding, dan Content.
- Properti Teks CSS: Font, Warna, Ukuran, Alignment, dan lainnya.
- Background CSS: Warna, Gambar, dan Properti Background lainnya.
- Tata Letak CSS: Float, Position, Display, Flexbox, dan Grid.
- Responsif Web Design: Media Queries dan Viewport.
- Transisi dan Animasi CSS: Membuat Efek Visual yang Menarik.
- Tips dan Trik CSS: Praktik Terbaik dan Sumber Daya Tambahan.
- Contoh Proyek CSS: Menerapkan Pengetahuan CSS dalam Proyek Nyata.
1. Pengantar CSS
Apa itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa stylesheet yang digunakan untuk menggambarkan presentasi dokumen yang ditulis dalam HTML atau XML (termasuk varian XML seperti SVG, MathML, atau XHTML). CSS menjelaskan bagaimana elemen HTML harus ditampilkan di layar, di kertas, atau di media lain.
Sejarah Singkat CSS
CSS pertama kali diusulkan oleh Håkon Wium Lie pada tahun 1994. Pada saat itu, web sangat sederhana dan tidak memiliki standar untuk styling. HTML digunakan untuk struktur dan presentasi, yang membuat kode menjadi rumit dan sulit dikelola. CSS dikembangkan untuk mengatasi masalah ini dengan memisahkan presentasi dari struktur.
Mengapa CSS Penting?
CSS sangat penting karena memungkinkan Anda untuk:
- Mengontrol tampilan: Anda dapat mengubah warna, font, tata letak, dan aspek visual lainnya dari halaman web Anda.
- Mempertahankan konsistensi: Anda dapat menerapkan gaya yang sama ke beberapa halaman web, memastikan tampilan yang konsisten di seluruh situs web Anda.
- Membuat desain responsif: Anda dapat membuat desain web yang beradaptasi dengan ukuran layar yang berbeda, memberikan pengalaman pengguna yang optimal di semua perangkat.
- Memisahkan presentasi dari struktur: Ini membuat kode Anda lebih bersih, mudah dikelola, dan lebih mudah untuk diubah.
- Meningkatkan aksesibilitas: Dengan menggunakan CSS dengan benar, Anda dapat membuat situs web yang lebih mudah diakses oleh orang-orang dengan disabilitas.
2. Cara Menambahkan CSS ke HTML
Ada tiga cara utama untuk menambahkan CSS ke HTML:
- Inline CSS: Menambahkan gaya langsung ke elemen HTML menggunakan atribut
style. - Internal CSS: Menambahkan gaya di dalam tag
<style>di bagian<head>dokumen HTML. - Eksternal CSS: Menambahkan gaya dalam file CSS terpisah (dengan ekstensi
.css) dan menautkannya ke dokumen HTML menggunakan tag<link>.
Inline CSS
Inline CSS adalah cara paling sederhana untuk menambahkan gaya, tetapi juga yang paling tidak efisien. Ini karena Anda harus menambahkan gaya yang sama ke setiap elemen secara individual. Contoh:
Contoh:
<p style="color: blue; font-size: 16px;">Ini adalah paragraf dengan gaya inline.</p>
Kelebihan:
- Mudah digunakan untuk perubahan gaya yang cepat dan spesifik.
Kekurangan:
- Tidak efisien untuk gaya yang berulang.
- Membuat kode HTML menjadi berantakan.
- Sulit untuk dikelola dan dipelihara.
Internal CSS
Internal CSS lebih efisien daripada inline CSS karena Anda dapat menambahkan gaya ke beberapa elemen sekaligus. Ini dilakukan dengan menambahkan tag <style> ke bagian <head> dokumen HTML Anda. Contoh:
Contoh:
<head>
<title>Contoh Internal CSS</title>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Ini adalah paragraf dengan gaya internal.</p>
</body>
Kelebihan:
- Lebih efisien daripada inline CSS untuk gaya yang berulang.
- Kode lebih terstruktur daripada inline CSS.
Kekurangan:
- Tidak efisien untuk situs web dengan banyak halaman.
- Gaya hanya berlaku untuk satu halaman.
Eksternal CSS
Eksternal CSS adalah cara yang paling efisien dan terorganisir untuk menambahkan gaya ke halaman web Anda. Ini melibatkan pembuatan file CSS terpisah (dengan ekstensi .css) dan menautkannya ke dokumen HTML Anda menggunakan tag <link>. Contoh:
Contoh:
File HTML (index.html):
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Ini adalah paragraf dengan gaya eksternal.</p>
</body>
File CSS (style.css):
p {
color: red;
font-size: 20px;
}
Kelebihan:
- Paling efisien untuk situs web dengan banyak halaman.
- Gaya dapat digunakan kembali di beberapa halaman.
- Kode lebih terstruktur dan mudah dikelola.
- Memungkinkan caching browser untuk performa yang lebih baik.
Kekurangan:
- Membutuhkan file CSS terpisah.
Kesimpulan:
Untuk proyek kecil dan sederhana, inline atau internal CSS mungkin cukup. Namun, untuk proyek yang lebih besar dan kompleks, eksternal CSS adalah pilihan terbaik.
3. Sintaks CSS
Sintaks CSS terdiri dari tiga bagian utama:
- Selector: Memilih elemen HTML yang ingin Anda gaya.
- Property: Atribut CSS yang ingin Anda ubah (misalnya,
color,font-size). - Value: Nilai yang ingin Anda atur untuk properti (misalnya,
blue,16px).
Contoh:
p { /* Selector */
color: blue; /* Property: Value */
font-size: 16px; /* Property: Value */
}
Dalam contoh ini:
padalah selector (memilih semua elemen<p>).colordanfont-sizeadalah properti.bluedan16pxadalah nilai.
Setiap deklarasi properti dan nilai diakhiri dengan titik koma (;). Block deklarasi CSS diletakkan di dalam kurung kurawal ({}).
4. Selector CSS
Selector CSS digunakan untuk memilih elemen HTML yang ingin Anda gaya. Ada berbagai jenis selector yang tersedia, masing-masing dengan kegunaan yang berbeda.
- Elemen Selector: Memilih semua elemen HTML dengan nama tertentu (misalnya,
p,h1,div). - ID Selector: Memilih elemen HTML dengan ID tertentu (menggunakan awalan
#, misalnya,#header). - Class Selector: Memilih semua elemen HTML dengan class tertentu (menggunakan awalan
., misalnya,.highlight). - Atribut Selector: Memilih elemen HTML dengan atribut tertentu (misalnya,
[type="text"]). - Pseudo-classes: Memilih elemen berdasarkan state atau posisinya (misalnya,
:hover,:first-child). - Pseudo-elements: Memilih bagian tertentu dari elemen (misalnya,
::before,::after).
Elemen Selector
Elemen selector adalah selector yang paling dasar. Ini memilih semua elemen HTML dengan nama tertentu. Contoh:
p {
color: blue;
}
h1 {
font-size: 24px;
}
Ini akan membuat semua paragraf berwarna biru dan semua heading level 1 berukuran 24 piksel.
ID Selector
ID selector digunakan untuk memilih satu elemen HTML tertentu dengan ID yang sesuai. ID harus unik dalam satu halaman HTML. Contoh:
#header {
background-color: #f0f0f0;
}
Ini akan memberikan background warna abu-abu muda ke elemen dengan ID header.
Class Selector
Class selector digunakan untuk memilih semua elemen HTML dengan class tertentu. Class dapat digunakan pada beberapa elemen. Contoh:
.highlight {
font-weight: bold;
}
Ini akan membuat semua elemen dengan class highlight menjadi tebal.
Atribut Selector
Atribut selector digunakan untuk memilih elemen HTML dengan atribut tertentu. Contoh:
input[type="text"] {
border: 1px solid #ccc;
}
Ini akan memberikan border abu-abu tipis ke semua elemen <input> dengan atribut type yang sama dengan text.
Pseudo-classes
Pseudo-classes digunakan untuk memilih elemen berdasarkan state atau posisinya. Contoh:
a:hover {
color: red;
}
li:first-child {
font-weight: bold;
}
Ini akan mengubah warna tautan menjadi merah saat di-hover dan membuat item daftar pertama menjadi tebal.
Pseudo-elements
Pseudo-elements digunakan untuk memilih bagian tertentu dari elemen. Contoh:
p::first-letter {
font-size: 200%;
}
p::before {
content: "→ ";
}
Ini akan membuat huruf pertama dari setiap paragraf dua kali lebih besar dan menambahkan panah sebelum setiap paragraf.
5. Box Model CSS
Box model CSS adalah konsep penting dalam CSS yang menggambarkan bagaimana elemen HTML ditampilkan di halaman web. Setiap elemen dianggap sebagai kotak dengan properti berikut:
- Content: Isi dari elemen (teks, gambar, dll.).
- Padding: Ruang di sekitar konten, di dalam border.
- Border: Garis yang mengelilingi padding dan konten.
- Margin: Ruang di sekitar border, di luar elemen.
Diagram sederhana dari Box Model:
+-----------------------------------------------------+
| Margin |
| +-----------------------------------------------+ |
| | Border | |
| | +---------------------------------------+ | |
| | | Padding | | |
| | | +-------------------------------+ | | |
| | | | Content | | | |
| | | +-------------------------------+ | | |
| | | | | |
| | +---------------------------------------+ | |
| | | |
| +-----------------------------------------------+ |
| |
+-----------------------------------------------------+
Padding
Padding adalah ruang antara konten elemen dan bordernya. Properti padding dapat diatur untuk semua sisi elemen (top, right, bottom, left) atau secara individual.
.box {
padding: 10px; /* Semua sisi */
padding-top: 20px; /* Sisi atas */
padding-right: 15px; /* Sisi kanan */
padding-bottom: 10px; /* Sisi bawah */
padding-left: 5px; /* Sisi kiri */
}
Border
Border adalah garis yang mengelilingi padding dan konten elemen. Properti border terdiri dari tiga bagian: border-width, border-style, dan border-color.
.box {
border: 2px solid black; /* Semua sisi */
border-top: 1px dashed red; /* Sisi atas */
border-right: 3px dotted blue; /* Sisi kanan */
border-bottom: 2px double green; /* Sisi bawah */
border-left: 4px groove purple; /* Sisi kiri */
}
Margin
Margin adalah ruang di sekitar border elemen. Properti margin dapat diatur untuk semua sisi elemen (top, right, bottom, left) atau secara individual.
.box {
margin: 20px; /* Semua sisi */
margin-top: 30px; /* Sisi atas */
margin-right: 25px; /* Sisi kanan */
margin-bottom: 20px; /* Sisi bawah */
margin-left: 15px; /* Sisi kiri */
}
Box Sizing
Secara default, lebar dan tinggi elemen hanya mencakup kontennya. Padding dan border ditambahkan *ke* lebar dan tinggi ini. Ini dapat menyebabkan masalah tata letak. Untuk mengatasi ini, Anda dapat menggunakan properti box-sizing.
box-sizing: border-box; membuat lebar dan tinggi elemen mencakup konten, padding, dan border. Ini adalah praktik terbaik untuk membuat tata letak yang lebih mudah diprediksi.
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}
6. Properti Teks CSS
CSS menyediakan berbagai properti untuk memformat teks di halaman web Anda. Beberapa properti teks yang paling umum meliputi:
- font-family: Menentukan font yang akan digunakan untuk teks.
- font-size: Menentukan ukuran font.
- font-weight: Menentukan ketebalan font (misalnya,
bold,normal). - font-style: Menentukan gaya font (misalnya,
italic,normal). - color: Menentukan warna teks.
- text-align: Menentukan alignment teks (misalnya,
left,right,center,justify). - line-height: Menentukan tinggi garis teks.
- text-decoration: Menentukan dekorasi teks (misalnya,
underline,overline,line-through,none). - letter-spacing: Menentukan jarak antar huruf.
- word-spacing: Menentukan jarak antar kata.
- text-transform: Mengubah teks menjadi huruf besar, huruf kecil, atau kapital (misalnya,
uppercase,lowercase,capitalize).
Contoh:
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
text-align: justify;
line-height: 1.5;
}
h1 {
font-family: "Times New Roman", serif;
font-size: 32px;
font-weight: bold;
text-align: center;
}
7. Background CSS
CSS memungkinkan Anda untuk mengatur background elemen menggunakan berbagai properti:
- background-color: Menentukan warna background elemen.
- background-image: Menentukan gambar background elemen.
- background-repeat: Menentukan bagaimana gambar background akan diulang (misalnya,
repeat,no-repeat,repeat-x,repeat-y). - background-position: Menentukan posisi gambar background (misalnya,
top left,bottom right,center). - background-size: Menentukan ukuran gambar background (misalnya,
cover,contain,auto). - background-attachment: Menentukan apakah gambar background akan tetap atau scroll bersama konten (misalnya,
fixed,scroll).
Contoh:
body {
background-color: #f0f0f0;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
Anda juga dapat menggunakan properti background shorthand untuk mengatur semua properti background dalam satu baris:
body {
background: #f0f0f0 url("background.jpg") no-repeat center cover fixed;
}
8. Tata Letak CSS
CSS menyediakan berbagai teknik untuk mengatur tata letak elemen di halaman web Anda. Beberapa teknik yang paling umum meliputi:
- Float: Membuat elemen mengambang ke kiri atau kanan konten di sekitarnya.
- Position: Menentukan posisi elemen relatif terhadap posisinya normal atau viewport.
- Display: Menentukan bagaimana elemen ditampilkan (misalnya,
block,inline,inline-block,flex,grid). - Flexbox: Model tata letak satu dimensi yang dirancang untuk membuat tata letak yang responsif dan fleksibel.
- Grid: Model tata letak dua dimensi yang dirancang untuk membuat tata letak yang kompleks dan terstruktur.
Float
Properti float digunakan untuk membuat elemen mengambang ke kiri atau kanan konten di sekitarnya. Ini sering digunakan untuk membuat tata letak multi-kolom. Contoh:
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}
Setelah menggunakan float, Anda perlu membersihkan float untuk mencegah elemen berikutnya ikut mengambang. Ini dapat dilakukan dengan menggunakan properti clear (clear: both;) atau dengan menggunakan teknik clearfix.
Position
Properti position menentukan bagaimana elemen diposisikan di halaman web. Ada lima nilai untuk properti position:
- static: Posisi default. Elemen diposisikan sesuai dengan alur dokumen normal.
- relative: Elemen diposisikan relatif terhadap posisinya normal. Anda dapat menggunakan properti
top,right,bottom, danleftuntuk memindahkan elemen. - absolute: Elemen diposisikan relatif terhadap ancestor terdekat yang memiliki posisi selain
static. Jika tidak ada ancestor seperti itu, elemen diposisikan relatif terhadap dokumen. - fixed: Elemen diposisikan relatif terhadap viewport (jendela browser). Elemen fixed akan tetap di posisi yang sama bahkan saat Anda scroll halaman.
- sticky: Elemen berperilaku seperti
relativesampai mencapai offset tertentu, kemudian menjadifixed.
Contoh:
.relative {
position: relative;
top: 20px;
left: 30px;
}
.absolute {
position: absolute;
top: 100px;
right: 50px;
}
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
}
Display
Properti display menentukan bagaimana elemen ditampilkan. Beberapa nilai yang umum digunakan adalah:
- block: Elemen ditampilkan sebagai blok, menempati seluruh lebar yang tersedia dan memulai baris baru.
- inline: Elemen ditampilkan inline, hanya menempati ruang yang dibutuhkan oleh kontennya.
- inline-block: Elemen ditampilkan inline, tetapi berperilaku seperti elemen blok. Anda dapat mengatur lebar dan tinggi elemen.
- none: Elemen tidak ditampilkan sama sekali.
- flex: Mengaktifkan Flexbox.
- grid: Mengaktifkan Grid.
Contoh:
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
}
Flexbox
Flexbox adalah model tata letak satu dimensi yang dirancang untuk membuat tata letak yang responsif dan fleksibel. Ini sangat berguna untuk mengatur elemen dalam satu baris atau kolom.
Untuk menggunakan Flexbox, Anda perlu mengatur properti display: flex; pada container elemen. Kemudian, Anda dapat menggunakan properti Flexbox pada container dan item di dalamnya untuk mengatur tata letak.
Beberapa properti Flexbox yang umum digunakan:
- flex-direction: Menentukan arah item Flexbox (
row,column,row-reverse,column-reverse). - justify-content: Menentukan bagaimana item Flexbox didistribusikan sepanjang sumbu utama (
flex-start,flex-end,center,space-between,space-around,space-evenly). - align-items: Menentukan bagaimana item Flexbox disejajarkan sepanjang sumbu silang (
flex-start,flex-end,center,baseline,stretch). - flex-wrap: Menentukan apakah item Flexbox harus membungkus ke baris baru jika tidak muat dalam satu baris (
nowrap,wrap,wrap-reverse). - flex: Properti shorthand untuk
flex-grow,flex-shrink, danflex-basis.
Contoh:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
Grid
Grid adalah model tata letak dua dimensi yang dirancang untuk membuat tata letak yang kompleks dan terstruktur. Ini memungkinkan Anda untuk membagi halaman web menjadi baris dan kolom, dan menempatkan elemen di dalam sel-sel grid.
Untuk menggunakan Grid, Anda perlu mengatur properti display: grid; pada container elemen. Kemudian, Anda dapat menggunakan properti Grid pada container dan item di dalamnya untuk mengatur tata letak.
Beberapa properti Grid yang umum digunakan:
- grid-template-columns: Menentukan jumlah dan lebar kolom grid.
- grid-template-rows: Menentukan jumlah dan tinggi baris grid.
- grid-gap: Menentukan jarak antara baris dan kolom grid.
- grid-column: Menentukan kolom tempat elemen ditempatkan.
- grid-row: Menentukan baris tempat elemen ditempatkan.
Contoh:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 kolom dengan lebar yang sama */
grid-template-rows: auto auto; /* 2 baris dengan tinggi otomatis */
grid-gap: 10px;
}
.item {
background-color: #ccc;
padding: 20px;
}
.item1 {
grid-column: 1 / 3; /* Menempati kolom 1 dan 2 */
}
.item4 {
grid-column: 3; /* Menempati kolom 3 */
grid-row: 1 / 3; /* Menempati baris 1 dan 2 */
}
9. Responsif Web Design
Responsif web design adalah pendekatan untuk membuat situs web yang beradaptasi dengan ukuran layar yang berbeda. Ini memastikan bahwa situs web Anda terlihat bagus dan mudah digunakan di semua perangkat, dari desktop hingga ponsel.
Dua teknik utama yang digunakan dalam responsif web design adalah:
- Media Queries: Memungkinkan Anda untuk menerapkan gaya CSS yang berbeda berdasarkan karakteristik perangkat (misalnya, lebar layar, tinggi layar, orientasi).
- Viewport: Meta tag yang mengontrol bagaimana halaman web diskalakan di perangkat seluler.
Media Queries
Media queries memungkinkan Anda untuk menerapkan gaya CSS yang berbeda berdasarkan karakteristik perangkat. Anda dapat menggunakan media queries untuk mengubah tata letak, ukuran font, gambar, dan aspek visual lainnya dari situs web Anda.
Contoh:
/* Gaya default */
body {
font-size: 16px;
}
/* Gaya untuk layar yang lebih kecil dari 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Gaya untuk layar yang lebih besar dari 768px */
@media (min-width: 769px) {
body {
font-size: 18px;
}
}
Viewport
Viewport adalah meta tag yang mengontrol bagaimana halaman web diskalakan di perangkat seluler. Ini penting untuk memastikan bahwa situs web Anda terlihat benar di perangkat seluler.
Anda dapat menambahkan meta tag viewport ke bagian <head> dokumen HTML Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Atribut width=device-width mengatur lebar viewport ke lebar perangkat. Atribut initial-scale=1.0 mengatur skala awal halaman ke 100%.
10. Transisi dan Animasi CSS
CSS memungkinkan Anda untuk membuat transisi dan animasi yang menarik untuk meningkatkan pengalaman pengguna. Transisi memungkinkan Anda untuk mengubah properti CSS secara bertahap, sementara animasi memungkinkan Anda untuk membuat urutan perubahan properti yang kompleks.
Transisi
Properti transition memungkinkan Anda untuk mengubah properti CSS secara bertahap selama periode waktu tertentu.
Properti transition shorthand terdiri dari:
- transition-property: Properti CSS yang ingin Anda transisikan (misalnya,
color,background-color,transform). - transition-duration: Berapa lama transisi akan berlangsung (misalnya,
0.5s,1s). - transition-timing-function: Fungsi yang menentukan bagaimana transisi akan berjalan (misalnya,
ease,linear,ease-in,ease-out,ease-in-out). - transition-delay: Berapa lama untuk menunggu sebelum transisi dimulai (misalnya,
0s,0.2s).
Contoh:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.5s ease; /* Transisi warna background selama 0.5 detik dengan fungsi ease */
}
.button:hover {
background-color: red; /* Ubah warna background saat di-hover */
}
Animasi
Animasi memungkinkan Anda untuk membuat urutan perubahan properti yang kompleks menggunakan keyframes.
Langkah-langkah untuk membuat animasi:
- Tentukan Keyframes: Gunakan aturan
@keyframesuntuk menentukan urutan perubahan properti. - Terapkan Animasi ke Elemen: Gunakan properti
animationuntuk menerapkan animasi ke elemen.
Properti animation shorthand terdiri dari:
- animation-name: Nama keyframes yang ingin Anda gunakan.
- animation-duration: Berapa lama animasi akan berlangsung (misalnya,
2s,5s). - animation-timing-function: Fungsi yang menentukan bagaimana animasi akan berjalan (misalnya,
ease,linear,ease-in,ease-out,ease-in-out). - animation-delay: Berapa
