Aturan @keyframes memungkinkan elemen berubah gaya secara bertahap dari satu set properti ke set lainnya dalam rentang persentase 0% hingga 100%.
CSS Animations
Contoh Kode CSS Animations:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes denyut {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
.lingkaran-denyut {
width: 80px;
height: 80px;
background: #e34f26;
border-radius: 50%;
margin: 40px auto;
animation: denyut 1.5s infinite ease-in-out;
}
</style>
</head>
<body>
<div class="lingkaran-denyut"></div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS Animations mengubah tampilan elemen di atas.