Properti transition memungkinkan Anda mengubah nilai properti secara mulus selama durasi tertentu.
CSS Transitions
Contoh Kode CSS Transitions:
<!DOCTYPE html>
<html>
<head>
<style>
.tombol-animasi {
background-color: #0d2e5c;
color: white;
padding: 12px 24px;
border: none;
border-radius: 30px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease-in-out;
}
.tombol-animasi:hover {
background-color: #fca311;
color: #0d2e5c;
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(252, 163, 17, 0.4);
}
</style>
</head>
<body>
<button class="tombol-animasi">Arahkan Kursor Kemari »</button>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS Transitions mengubah tampilan elemen di atas.