CSS #5: Transisi & Animasi

CSS (Cascading Style Sheets) memungkinkan kita untuk menambahkan efek dinamis pada halaman web. Dua fitur yang paling umum digunakan untuk tujuan ini adalah transisi dan animasi. Dalam artikel ini, kita akan membahas cara menggunakan transisi dan animasi CSS untuk membuat pengalaman pengguna yang lebih menarik.

Transisi CSS

Transisi CSS memungkinkan perubahan nilai properti CSS terjadi secara bertahap dalam jangka waktu tertentu, menciptakan efek yang lebih halus daripada perubahan instan.

Properti transition

Untuk menggunakan transisi, kita perlu menggunakan properti transition. Properti ini mengontrol efek transisi dari satu nilai properti CSS ke nilai lainnya.

Beberapa sub-properti dari transition adalah:

transition-property: Menentukan properti CSS mana yang akan mengalami transisi.
transition-duration: Menentukan berapa lama transisi berlangsung.
transition-timing-function: Menentukan kurva kecepatan efek transisi.
transition-delay: Menentukan berapa lama menunggu sebelum transisi dimulai.

Contoh:

.box {
 width: 100px;
 height: 100px;
 background-color: blue;
 transition: width 2s, height 2s, transform 2s;
}
.box:hover {
 width: 200px;
 height: 200px;
 transform: rotate(45deg);
}

Pada contoh di atas, saat elemen dengan kelas .box di-hover, ukurannya akan berubah dari 100x100 piksel menjadi 200x200 piksel, dan akan berotasi sebesar 45 derajat selama 2 detik.

Contoh Transisi

Berikut adalah contoh sederhana dari penggunaan transisi pada sebuah elemen tombol:

<!DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Transisi CSS</title>
<style>
 .button {
   background-color: #4CAF50;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   transition: background-color 0.5s ease;
 }
 .button:hover {
   background-color: #45a049;
 }
</style>
</head>
<body>
<a href="#" class="button">Hover me</a>
</body>
</html>

Pada contoh ini, saat tombol di-hover, warna latar belakangnya akan berubah secara halus dari hijau terang ke hijau lebih gelap dalam waktu 0,5 detik.

Animasi CSS

Animasi CSS memungkinkan perubahan lebih kompleks pada elemen dengan menggunakan keyframes. Dengan animasi, kita bisa mengontrol perubahan dalam beberapa langkah (keyframes).

Keyframes

@keyframes digunakan untuk mendefinisikan sebuah animasi. Kita bisa menentukan kondisi awal, kondisi akhir, dan beberapa langkah antara kedua kondisi tersebut.

Contoh:

@keyframes example {
 0% { background-color: red; left: 0px; top: 0px; }
 25% { background-color: yellow; left: 200px; top: 0px; }
 50% { background-color: blue; left: 200px; top: 200px; }
 75% { background-color: green; left: 0px; top: 200px; }
 100% { background-color: red; left: 0px; top: 0px; }
}

Pada contoh di atas, animasi akan mengubah warna latar belakang dan posisi elemen sesuai dengan langkah-langkah yang telah ditentukan.

Properti animation

Untuk menerapkan keyframes pada elemen, kita menggunakan properti animation. Beberapa sub-properti dari animation adalah:

animation-name: Nama dari keyframes yang akan digunakan.
animation-duration: Lama waktu animasi berlangsung.
animation-timing-function: Kurva kecepatan animasi.
animation-delay: Waktu tunggu sebelum animasi dimulai.
animation-iteration-count: Berapa kali animasi akan diputar.
animation-direction: Arah animasi (normal, reverse, alternate).

Contoh:

.box {
 width: 100px;
 height: 100px;
 position: relative;
 animation-name: example;
 animation-duration: 4s;
 animation-iteration-count: infinite;
}

Contoh Animasi

Berikut adalah contoh sederhana dari penggunaan animasi pada sebuah elemen kotak:

<!DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Animasi CSS</title>
<style>
@keyframes move {
   0% { left: 0; top: 0; }
   25% { left: 200px; top: 0; }
   50% { left: 200px; top: 200px; }
   75% { left: 0; top: 200px; }
   100% { left: 0; top: 0; }
 }
 .box {
   width: 50px;
   height: 50px;
   background-color: red;
   position: absolute;
   animation: move 4s infinite;
 }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Pada contoh ini, kotak merah akan bergerak dalam sebuah persegi selama 4 detik dan mengulanginya terus-menerus.

Sumber