Animasi CSS dengan @keyframes
Animasi CSS dengan @keyframes - Dengan adanya animasi pada CSS membuat kita bisa dengan mudah dalam mengatur dan membuat suatu pergerakan atau perubahan elemen. Ada banyak penggunaan animasi CSS salah satu yang akan saya bahas kali ini adalah @keyframes, @keyframes merupakan aturan dari animasi CSS untuk melakukan suatu pergerakan atau perubahan elemen. Dengan begitu kalian bisa dengan mudah membuat animasi sederhana dengan hanya menggunakan CSS saja.
Saya akan praktekan @keyframes pada elemen div, dimana akan ada perubahan atau animasi ukuran pada elemen div nya. Silahkan kalian bisa ketikan sintaknya berikut ini.
<meta charset="UTF-8">
<title>Animasi CSS dengan @keyframes</title>
<style>
div {
width: 10px;
height: 50px;
background-color: red;
animation-name: ukuran;
animation-duration: 5s;
}
@keyframes ukuran {
from {width: 10px;}
to {width: 500px;}
}
</style>
</head>
<body>
<div></div>
</body>
Dari sintak diatas telah ditentukan nama animasi pada properti animation-name yaitu ukuran untuk selanjutnya nama ukuran akan dipanggil pada selector @keyframes untuk melakukan perubahan ukuran dari dan sampai. Dimana akan terjadi perubahan ukuran dari 10px sampai dengan ukuran 500px, kemudian ditambahkan dengan durasi animasi sebanyak 5s.
Baiklah, cukup sekian pembahasan mengenai Animasi CSS dengan @keyframes semoga dengan pembahasan dan contoh diatas bermanfaat buat kalian, selamat mencoba dan sampai jumpa pada pembahasan selanjutnya.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
