Cara Membuat Animasi Rotasi dengan CSS

13/09/2018    Risman Hakim    411     Website

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

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More