Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Menguasai CSS Animations: Menghidupkan Elemen Web

Untuk membuat animasi, Anda memerlukan dua hal: Keyframes (alur gerakannya) dan Animation Properties (aturan mainnya).

1. @keyframes (Alur Cerita)

@keyframes adalah tempat Anda mendefinisikan apa yang terjadi pada setiap tahap animasi. Anda bisa menggunakan kata kunci from dan to, atau menggunakan persentase (0% hingga 100%) untuk kontrol yang lebih detail.

@keyframes munculDanPutar { 0% { opacity: 0; transform: translateY(20px) rotate(0deg); } 50% { opacity: 0.5; transform: translateY(-10px) rotate(180deg); } 100% { opacity: 1; transform: translateY(0) rotate(360deg); }
}

2. Animation-Name

Setelah membuat @keyframes, Anda harus memanggil namanya pada elemen yang ingin dianimasikan.

• Contoh: animation-name: munculDanPutar;

3. Animation-Iteration-Count

Properti ini menentukan berapa kali animasi akan diputar.

• Angka: Misal 3, maka animasi berhenti setelah 3 kali putaran.

• Infinite: Animasi akan berjalan terus-menerus tanpa henti (sangat populer untuk efek loading atau background bergerak).

Tutorial: Membuat Efek "Pulse" (Berdenyut) pada Tombol

Mari kita buat sebuah tombol "Hot News" untuk portal SatuMedia yang berdenyut secara halus untuk menarik perhatian pembaca.

Struk tur HTML

<button class="btn-pulse">BERITA TERBARUbutton>

Kode CSS

/* 1. Definisi Gerakan Denyut */
@keyframes pulse-effect { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
} /* 2. Terapkan pada Tombol */
.btn-pulse { padding: 10px 20px; background-color: #e74c3c; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; /* Aturan Animasi */ animation-name: pulse-effect; animation-duration: 2s; animation-iteration-count: infinite; /* Berjalan terus menerus */ animation-timing-function: ease-in-o ut;
}

Properti Shorthand (Cara Cepat)

Sama seperti properti lainnya, Anda bisa menggabungkannya dalam satu baris:

/* name duration ti ming-function delay iteration-count direction */
animation: pulse-effect 2s ease-in-out infinite;

Tips Pro untuk Developer

1. Gunakan Transform & Opacity: Seperti pada transition, animasi yang menggunakan transform dan opacity jauh lebih ringan bagi GPU dibandingkan animasi yang mengubah width, height, atau top/left.

2. Prefers-Reduced-Motion: Selalu pertimbangkan aksesibilitas. Beberapa pengguna merasa pusing dengan animasi. Anda bisa mematikan animasi bagi mereka menggunakan media query:

   CSS

   @media (prefers-reduced-motion: reduce) { .btn-pulse { animation: none; }
   }
   

3. Optimization: Jangan gunakan iteration-count: infinite pada terlalu banyak elemen sekaligus, karena dapat meningkatkan beban kerj a CPU browser, terutama di perangkat mobile.

Efek animasi ini sangat cocok diterapkan pada fitur Trending Score atau RSS Feed di aplikasi Anda agar terlihat lebih modern dan interaktif!