Series Mahir CSS #14 : CSS Animation

Hai teman-teman! Kali ini kita akan membahas topik yang seru dan menarik, yaitu Animasi CSS! Dengan menggunakan animasi, kamu bisa membuat tampilan web yang lebih hidup dan dinamis tanpa perlu menggunakan JavaScript tambahan. Mari kita pelajari bagaimana cara menggunakan animasi di CSS dan membuat tampilan yang lebih menarik!

Apa Itu Animasi CSS?

Animasi CSS memungkinkan kamu untuk mengubah tampilan elemen di halaman web dengan transisi yang halus dan otomatis. Dengan bantuan properti animasi, kamu bisa membuat efek bergerak pada elemen seperti teks, gambar, atau kotak konten. Animasi ini cukup ringan dan bisa berjalan tanpa harus menggunakan kode JavaScript tambahan.

Properti Dasar Animasi CSS

Untuk membuat animasi, kamu perlu menggunakan beberapa properti CSS yang mendasar. Berikut ini adalah penjelasan tentang properti animasi yang penting:

1. @keyframes

Properti ini digunakan untuk mendefinisikan urutan gerakan yang ingin kamu buat. Di dalam @keyframes, kamu bisa menentukan bagaimana elemen berubah dari posisi awal ke posisi akhir dalam periode waktu tertentu.

Contoh:

@keyframes exampleAnimation {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

Dalam contoh di atas, elemen akan tumbuh dan transparan hingga 50% dari durasi animasi, lalu kembali ke keadaan awal.

2. animation

Properti ini digunakan untuk mengaktifkan dan menerapkan animasi di elemen. Untuk menggunakan properti animation, kamu perlu menentukan beberapa nilai, seperti nama animasi yang sudah didefinisikan di @keyframes, durasi, delay, timing function, dan banyak lagi.

Contoh:

.element {
    animation: exampleAnimation 2s infinite ease-in-out; /* Nama animasi, durasi 2 detik, infinite looping, easing */
}

Di sini, animation memiliki beberapa bagian:

• exampleAnimation: Nama dari animasi yang didefinisikan di @keyframes.
• 2s: Durasi animasi dalam 2 detik.
• infinite: Animasi ini akan looping terus menerus.
• ease-in-out: Jenis timing function untuk membuat transisi lebih halus.

3. animation-name

Properti ini hanya menentukan nama animasi yang kamu buat di @keyframes.

Contoh:

.element {
    animation-name: exampleAnimation;
}

4. animation-duration

Properti ini digunakan untuk menentukan durasi dari animasi dalam hitungan detik atau milidetik.

Contoh:

.element {
    animation-duration: 3s;
}

5. animation-delay

Properti ini digunakan untuk menunda waktu mulai animasi.

Contoh:

.element {
    animation-delay: 1s;
}

6. animation-iteration-count

Properti ini digunakan untuk menentukan berapa kali animasi diulang.

• infinite: Animasi akan berulang terus-menerus.
• 3: Animasi akan diulang sebanyak 3 kali.

Contoh:

.element {
    animation-iteration-count: infinite;
}

7. animation-timing-function

Properti ini digunakan untuk menentukan bagaimana kecepatan animasi berubah selama durasi.

Nilai-nilai yang umum digunakan adalah:

• ease: Gerakan animasi dimulai lambat, cepat di tengah, dan kembali ke lambat di akhir.
• linear: Gerakan animasi sama selama seluruh durasi.
• ease-in: Gerakan animasi mulai lambat, cepat di tengah, dan kembali lambat di akhir.
• ease-out: Gerakan animasi dimulai cepat, lambat di tengah, dan cepat kembali di akhir.
• ease-in-out: Gerakan animasi dimulai dan diakhiri lambat, dengan kecepatan cepat di tengah.

Contoh:

.element {
    animation-timing-function: ease-in-out;
}

Menggunakan Animasi CSS untuk Membuat Efek Tertentu

Animasi bisa digunakan untuk berbagai macam efek, seperti bergerak, berubah ukuran, atau opacity. Mari kita lihat contoh-contoh praktisnya:

1. Mengubah Skala Elemen
   Untuk membuat efek skala, kamu bisa menggunakan property transform di dalam keyframes:

@keyframes growAndFade {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0.5; }
}

.element {
    animation: growAndFade 3s infinite alternate;
}

2. Membuat Efek Bergerak Sempurna
   Jika ingin elemen bergerak dari kiri ke kanan, kamu bisa menggunakan transform: translate.

@keyframes moveRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
}

.element {
    animation: moveRight 5s linear infinite;
}

3. Efek Opacity
   Untuk membuat efek transisi opacity, kamu bisa gunakan property opacity di dalam keyframes.

@keyframes fadeInOut {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.element {
    animation: fadeInOut 4s ease-in-out infinite;
}

Membuat Animasi dengan Transisi Responsif

Salah satu kelebihan Animasi CSS adalah kemampuannya untuk dibuat lebih fleksibel dengan media queries. Kamu bisa mengatur tampilan elemen agar lebih dinamis saat ditampilkan pada berbagai ukuran layar.

Contoh media query untuk animasi responsif:

@media (max-width: 768px) {
    .element {
        animation: moveRight 3s linear infinite;
    }
}

Dengan media query ini, animasi akan lebih cepat diakses saat ukuran layar lebih kecil.

Kesimpulan

Animasi CSS adalah cara yang menarik dan ringan untuk menambahkan efek dinamis pada halaman web kamu. Dengan menggunakan @keyframes, kamu bisa membuat berbagai macam animasi, dan dengan properti animasi lainnya, kamu bisa mengatur durasi, timing, dan gaya transisi yang kamu butuhkan. Semoga penjelasan ini memudahkan kamu untuk membuat animasi di CSS!

Sekianlah belajar CSS tentang Animasi. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Terus semangat belajar dan bereksperimen dengan animasi CSS! ?