diff --git a/CSS/058 CSS Animation/README.md b/CSS/058 CSS Animation/README.md new file mode 100644 index 0000000..2ef6c18 --- /dev/null +++ b/CSS/058 CSS Animation/README.md @@ -0,0 +1,47 @@ +# Animation + +Sedikit berbeda dengan **transition**, yang terjadinya animasi hanya ketika ada perubahan kondisi. **Animation** digunakan untuk membuat animasi saat halaman dimuat. **Animasi** dibuat dengan selector **@keyframes** dan digunakan saat property **animation**. Beberapa property yang berhubungan dengan animasi yaitu: + +- **Animation-delay**, menunjukkan lama waktu sebelum terjadinya animasi. +- **Animation-duration**, menunjukkan lama waktu terjadinya animasi. +- **Animation-direction**, menunjukkan arah terjadinya animasi, dapat diisi `normal`, `reverse`, dan `alternate-reverse`. +- **Animation-fill-mode**, menunjukkan bagaimana style elemen ketika animasi tidak berjalan, baik sebelum animasi maupun setelahnya, dapat diisi `none`, `forwards`, `backwards`, dan `both`. +- **Animation-iteration-count**, menunjukkan berapa kali animasi akan dijalankan. +- **Animation-name**, menunjukkan nama animasi yang akan dijalankan. +- **Animation-play-state**, menunjukkan animasi berjalan atau pause, dapat diisi `running` atau `paused`. +- **Animation-timing-function**, menunjukkan perubahan kecepatan animasi, isinya sama seperti pada transition. + +Sebagai contoh, perhatikan skrip berikut: + +```HTML + + + + + + +

CSS Animation

+
+ + +``` + +`From` dapat diganti dengan 0% dan `to` dapat diganti dengan 100%. +Untuk menambahkan keyframe, tambahkan baris baru diawali dengan nilai persentase animasi diikuti perubahan property, +misal : 60%{left: 400px}. Jalankan pada browser untuk melihat hasilnya. + + +![Output](./assets/css_animation.gif) \ No newline at end of file diff --git a/CSS/058 CSS Animation/assets/css_animation.gif b/CSS/058 CSS Animation/assets/css_animation.gif new file mode 100644 index 0000000..98d37b1 Binary files /dev/null and b/CSS/058 CSS Animation/assets/css_animation.gif differ diff --git a/README.md b/README.md index 2bc3eea..71254ab 100644 --- a/README.md +++ b/README.md @@ -119,3 +119,4 @@ Semua _script_ yang ada pada repositori ini, dapat diakses dengan cepat lewat li - [Media Query](CSS/055%20CSS%20Media%20Query/README.md) - [Flexbox](CSS/056%20CSS%20Flexbox/README.md) - [Grid](CSS/057%20CSS%20Grid/README.md) +- [Animation](CSS/058%20CSS%20Animation/README.md) \ No newline at end of file