CSS3Tingkat: Menengah6 min
Transisi Halus, Keyframe Animasi & Transform
Ciptakan antarmuka yang hidup dan responsif dengan properti transition, transformasi 2D/3D (scale, rotate, translate), dan @keyframes animation.
Transisi State yang Halus
Pratinjau TerbukaProperti transition menganimasikan perubahan nilai properti CSS secara bertahap saat elemen mengalami perubahan pseudo-class seperti :hover atau :focus.
Contoh Kode Sintaks
.btn-interaktif {
background-color: #d97757;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}
.btn-interaktif:hover {
background-color: #c26547;
transform: translateY(-2px) scale(1.02);
}Animasi Bebas dengan @keyframes
Keyframes mengontrol tahapan animasi dari 0% (from) hingga 100% (to):
@keyframes pulseGlow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.05); }
}
.pulsing-badge {
animation: pulseGlow 2s infinite ease-in-out;
}
Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi