Cara Membuat Animasi Rotasi dengan CSS
Cara Membuat Animasi Rotasi dengan CSS - Didalam CSS terdpat properti -webkit-transform yang bisa kita manfaatkan untuk membuat suatu rotasi atau perputaran, properti ini bisa diterapkan pada objek atau elemen apapun didalam HTML. Berikut ini akan saya bagikan salah satu contoh implementasinya yaitu bagaimana Cara Membuat Animasi Rotasi dengan CSS. Yuk simak prakteknya berikut.
Langkah 1 : Cara Membuat Animasi Rotasi dengan CSS
Langkah pertama untuk membuat animasi rotasi, kita tentukan objek atau elemen yang akan dikenai animasi dalam kasus ini saya akan menggunakan icon dari font awesome sebagai objeknya. Untuk itu silahkan kalian bisa ketikan sintak HTML berikut, serta meload atau menghubungkan link font awesome dengan file HTML.
<div class="circle-1">
<div class="circle-2">
<i class="fas fa-compact-disc"></i>
</div>
</div>
</body>
Langkah 2 : Cara Membuat Animasi Rotasi dengan CSS
Setelah membuat struktur HTML seperti diatas, langkah selanjutnya adalah mendesain dan tentunya membuat animasi rotasi untuk icon nya, kalian bisa ketikan sintak CSS berikut untuk membuat animasi rotasi.
.circle-1 {
width: 250px;
height: 250px;
padding: 3px;
border: 7px solid #ffa801;
border-radius: 50%;
}
.circle-2 {
width: 250px;
height: 250px;
background: #212529;
border-radius: 50%;
-webkit-animation: rotation 8s infinite linear;
}
.fa-compact-disc {
font-size: 15em;
color: #ffa801;
text-align: center;
display: block;
line-height: 248px;
}
@-webkit-keyframes rotation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
Pada sintak diatas yaitu @-webkit-keyframes rotation kita telah set perputaran icon awal bernilai 0deg sampai dengan 360deg, artinya icon akan berputar sebanyak 360 derajat.
Setelah semua sintak CSS dan HTML telah diketikan, silahkan simpan filenya dengan nama index.html kemudian kalian bisa buka pada browser masing - masing dan lihat hasil akhirnya. Maka akan terlihat icon dengan animasi perputaran secara terus menerus.
Baiklah, cukup sekian tutorial CSS mengenai bagaimana Cara Membuat Animasi Rotasi dengan CSS, semoga tutorial animasi CSS ini bisa bermanfaat dan selamat mencoba :)
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)
