Home / CSS / Tutorial Membuat Animasi Kompleks dengan CSS dan Keyframes

Tutorial Membuat Animasi Kompleks dengan CSS dan Keyframes

Created at by Aris Munandar
Share on

Dalam dunia web modern, animasi CSS bukan hanya soal estetika — tapi juga tentang pengalaman pengguna (UX). Dengan animasi yang halus dan terarah, kamu bisa membuat interaksi pengguna menjadi lebih hidup, intuitif, dan menyenangkan.

Melalui artikel ini, kamu akan belajar cara membuat animasi kompleks dengan CSS dan keyframes, memahami cara kerja CSS animation, serta menggunakan timing function dan transition agar efeknya lebih realistis dan menarik.

Daftar isi

Baca juga: Cara Menggunakan CSS Preprocessor: SASS dan SCSS untuk Pemula

Mengapa Animasi CSS Penting?

Banyak orang berpikir animasi hanya untuk mempercantik tampilan, padahal animasi bisa:

  • Menarik perhatian ke elemen penting.
  • Memberikan feedback visual saat interaksi (hover, klik, dll).
  • Membantu pengguna memahami alur atau proses pada halaman.
  • Meningkatkan kesan profesional pada desain web.

Dengan CSS keyframes, semua ini bisa dilakukan tanpa JavaScript!

Konsep Dasar Animasi di CSS

Sebelum masuk ke animasi kompleks, kamu harus memahami konsep dasar berikut:

  • Transition → digunakan untuk efek perubahan sederhana, seperti hover.
  • Animation + @keyframes → digunakan untuk animasi kompleks dengan banyak tahapan.

Contoh perbandingan sederhana:

/* Contoh transition */
.button {
    background-color: #3498db;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #2ecc71;
}

/* Contoh animation */
@keyframes moveBox {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

.box {
    animation: moveBox 2s ease-in-out infinite;
}Code language: CSS (css)

Struktur Dasar @keyframes

Aturan @keyframes digunakan untuk mendefinisikan perubahan animasi pada titik waktu tertentu.

@keyframes namaAnimasi {
    0% {
        /* kondisi awal */
    }
    50% {
        /* kondisi tengah */
    }
    100% {
        /* kondisi akhir */
    }
}Code language: CSS (css)

Kemudian kamu bisa memanggilnya di elemen dengan properti animation:

.element {
    animation: namaAnimasi 2s ease-in-out infinite;
}Code language: CSS (css)

Properti Penting dalam CSS Animation

Berikut adalah beberapa properti utama yang wajib kamu kuasai:

PropertiDeskripsi
animation-nameNama animasi yang didefinisikan dengan @keyframes.
animation-durationLama waktu animasi berlangsung.
animation-timing-functionMengatur kecepatan animasi (misalnya ease, linear, ease-in-out).
animation-delayJeda waktu sebelum animasi dimulai.
animation-iteration-countJumlah pengulangan animasi (infinite untuk tanpa batas).
animation-directionMengatur arah animasi (normal, reverse, alternate).
animation-fill-modeMenentukan apakah elemen mempertahankan gaya akhir sebelum/dalam/sesudah animasi.

Membuat Animasi Kompleks dengan CSS Keyframes

Sekarang mari kita buat contoh animasi kompleks langkah demi langkah.

1. Membuat Efek Loading

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

.loader {
    width: 60px;
    height: 60px;
    border: 5px solid #ccc;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spinLoader 1s linear infinite;
}Code language: CSS (css)

Contoh kode lengkap animasi loading spinner dengan CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .center {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 5px solid #ccc;
            border-top-color: #3498db;
            border-radius: 50%;
            animation: spinLoader 1s linear infinite;
        }

        @keyframes spinLoader {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="center">
        <div class="loader"></div>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Penjelasan:

Elemen .loader berputar 360 derajat terus-menerus — ini teknik umum untuk membuat animasi loading spinner.

Contoh hasilnya adalah animasi di bawah ini.

CSS Loading Spinner

2. Membuat Efek Gelombang (Wave Animation)

HTML:

<h2 class="wave">
    <span>H</span><span>A</span><span>L</span><span>O</span><span>!</span>
</h2>Code language: HTML, XML (xml)

CSS:

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.wave span {
    display: inline-block;
    animation: wave 1.2s ease-in-out infinite;
}

.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }
.wave span:nth-child(5) { animation-delay: 0.4s; }Code language: CSS (css)

Berikut ini adalah kode lengkap animasi teks effect waves.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .center {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        @keyframes wave {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        .wave span {
            display: inline-block;
            animation: wave 1.2s ease-in-out infinite;
        }

        .wave span:nth-child(2) { animation-delay: 0.1s; }
        .wave span:nth-child(3) { animation-delay: 0.2s; }
        .wave span:nth-child(4) { animation-delay: 0.3s; }
        .wave span:nth-child(5) { animation-delay: 0.4s; }
    </style>
</head>
<body>
    <div class="center">
        <h2 class="wave">
            <span>H</span><span>A</span><span>L</span><span>O</span><span>!</span>
        </h2>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Hasilnya seperti teks yang bergelombang satu per satu — efek ini populer di landing page interaktif.

Berikut ini adalah hasil visualnya.

CSS Waves Animation

Kombinasi CSS Transition dan Keyframes

Kamu juga bisa menggabungkan transition dengan keyframes untuk efek yang lebih natural.

Contoh:

.card {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    transform: scale(1);
    transition: transform 0.4s ease;
}

.card:hover {
    transform: scale(1.05);
    animation: floatCard 1.5s ease-in-out infinite;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0) scale(1.05); }
    50% { transform: translateY(-8px) scale(1.05); }
}Code language: CSS (css)

Berikut ini adalah contoh kode lengkapnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .center {
            display: flex;
            height: 100vh;
            width: auto;
            justify-content: center;
            align-items: center;
        }

        .card {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            transform: scale(1);
            transition: transform 0.4s ease;
        }

        .card:hover {
            transform: scale(1.05);
            animation: floatCard 1.5s ease-in-out infinite;
        }

        @keyframes floatCard {
            0%, 100% { transform: translateY(0) scale(1.05); }
            50% { transform: translateY(-8px) scale(1.05); }
        }
    </style>
</head>
<body>
    <div class="center">
        <div class="card">
            <img src="https://placehold.co/200x200" alt="Card">
        </div>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Ketika di-hover, kartu membesar sedikit dan terlihat seperti melayang seperti di bawah ini.

CSS Card Hover Animation

CSS Timing Function: Mengontrol Ritme Animasi

CSS memiliki fungsi bawaan seperti:

  • linear → kecepatan tetap.
  • ease → mulai dan akhir lambat.
  • ease-in → mulai lambat, akhir cepat.
  • ease-out → mulai cepat, akhir lambat.
  • ease-in-out → keduanya lambat.

Atau kamu bisa membuat sendiri menggunakan cubic-bezier(x1, y1, x2, y2).

Contoh:

.element {
    animation: move 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}Code language: CSS (css)

Ini memberikan efek “bounce” alami seperti gaya gravitasi.

Tips Membuat Animasi Kompleks yang Efisien

  1. Gunakan transform & opacity
    Hindari mengubah width, height, atau margin karena membuat browser bekerja lebih berat.

  2. Gunakan durasi & delay dengan bijak
    Terlalu lama membuat pengguna bosan, terlalu cepat membuat animasi sulit diikuti.

  3. Gunakan tools visualizer
    Misalnya cubic-bezier.com untuk menyesuaikan kurva kecepatan animasi.

  4. Pertimbangkan performa di mobile
    Tes animasi di berbagai ukuran layar dan perangkat.

  5. Gunakan will-change
    Beri tahu browser properti yang akan sering berubah.

Contoh Animasi Kompleks Multi-Stage

@keyframes logoAnimation {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.9) rotate(270deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}

.logo {
    animation: logoAnimation 3s ease-in-out forwards;
}Code language: CSS (css)

Efek ini cocok untuk intro animation logo website atau loading screen modern.

Kesimpulan

Membuat animasi kompleks dengan CSS bukan lagi hal sulit. Dengan memahami @keyframes, animation properties, serta mengombinasikannya dengan transition dan timing function, kamu bisa membuat efek animasi yang profesional tanpa JavaScript.

Gunakan animasi dengan tujuan yang jelas — bukan hanya karena “keren”. Dengan praktik dan eksperimen, kamu akan memahami cara mengoptimalkan animasi agar ringan, interaktif, dan fungsional.

Share on

5 CSS Ahli

Menjadi CSS Developer yang siap proyek nyata

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Alamat email Anda tidak akan dipublikasikan. Required fields are marked *