Menerapkan Light FadeIn Animations pada Elemen ABADINEWS

Efek animasi ringan meningkatkan interaksi visual tanpa mengorbankan kecepatan. Berikut cara menambah fade‑in.

1. Definisikan Keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

2. Tambahkan Kelas CSS

.fade-in {
  animation: fadeIn 0.6s ease-in-out forwards;
}

3. Terapkan pada Elemen

Tambahkan kelas fade-in pada gambar hero, teks judul, atau tombol CTA di HTML.

4. Optimasi Mobile

Gunakan media query untuk menonaktifkan animasi pada perangkat dengan performa rendah.

5. Contoh Implementasi

<h2 class="fade-in">Berita Utama Hari Ini</h2>
<img src="hero.jpg" class="fade-in" alt="Hero Image">
<a href="#" class="btn btn-primary fade-in">Baca Selengkapnya</a>

6. Testing

Gunakan Chrome DevTools untuk memeriksa performa animasi dan memastikan tidak mengganggu load time.

Dengan sedikit CSS, ABADI.NEWS dapat menambah sentuhan modern pada desain tanpa mengorbankan kecepatan.