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.

<body>
    <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 :)

13 September 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat