Cara Membuat Animasi Icon Dengan CSS

Kadang kamu merasa bosan dengan tampilan project yang kamu buat? Sama kok! Tapi semua itu bisa kamu selesaikan dengan menggunakan CSS animasi. Agar laman yang kamu buat tidak lambat, gunakanlah sedikit animasi pada laman mu.

Output dari animasi yang akan kita buat :

1. Pertama-tama kita siapkan script untuk icon dari Fontawsome dengan kits milik ku, atau kalian bisa gunakan Fontawsome CDN sendiri:

<head>
  <script src="https://kit.fontawesome.com/d6e78495c8.js" crossorigin="anonymous"></script>
</head>

2. Setelah itu kita akan tampilkan icon loading dengan code berikut :

<body>
  <i class="animate fas fa-spinner"></i>
</body>

3. Nah, karena kita membuat animasi dengan CSS, jadi ga terlalu rumit code-nya. Inti dari CSS animasi ini adalah menggunakan aturan "@keyframe". Agar icon loading yang sudah kita buat bergerak, gunakan code CSS berikut :

<style>
    .animate {
        font-size: 20px;
        animation: loading infinite;	/*Mengatur nama animasi dengan "loading" dan infinate digunakan agar icon loading terus memutar tanpa henti*/
        animation-duration: 1s;		/*Durasi animasi*/
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1, 1, 0, 0);
    }

    @keyframes loading {	/*Keyframe dari animasi "loading"*/
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }
</style>

Yeay! Kamu telah berhasil membuat animasi dengan CSS. Agar kamu lebih paham, full code dari animasi ini adalah :

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<style>
.animate {
    font-size: 20px;
    animation: loading infinite;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1, 1, 0, 0);
}

@keyframes loading {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

</style>
</head>
<body>
    <i class="animate fas fa-spinner"></i>
</body>
</html>

Tau ga? Syntax dari aturan "@keyframe" itu adalah :

@keyframes animationname {keyframes-selector {css-styles;}}

Jadi kita bisa buat icon itu berputar atau bergerak kesamping. Contohnya :

@keyframes animationname {
10% {left: 20px;}
100% {left: 20px;}
}

✨ Mungkin kamu juga akan suka tutorial membuat toggle dark mode.

You might also like...