10 Contoh Animasi di CodePen Yang Dapat Kamu Pelajari

CodePen adalah tempat yang bagus untuk menemukan inspirasi dan melihat percobaan UI yang gila yang dilakukan orang lainnya. Sebagaimana hal ini, itu juga tempat yang berguna untuk menemukan konten edukasional. Di dalam kumpulan ini kita akan menjelajah beberapa contoh keren CodePen yang mengajari kita semua tentang animasi web.

1. How Keyframes Work

CodePen ini mengilustrasikan bagaimana browser membaca melalui urutan langkah-langkah dalam animasi keyframe.

2. Performant CSS Animation for Beginners

Ketika kita melakukan animasi dengan CSS kita memiliki rangkaian property yang sangat besar untuk animasi. Bagaimana pun juga, tidak semuanya merupakan ide yang bagus. Melakukan animasi properties yang salah dapat membuat animasi yang lambat dan jelek. Contoh dari Ian Hazelton ini menjelaskan bagaimana empat properties yang paling efisien berkerja.

3. Keyframes Animation Demo

Terkadang sebuah contoh sederhanalah yang kamu butuhkan. Contoh ini menunjukkan bagaimana sintaks from dan to dapat digunakan dalam sebuah keyframe sederhana.

4. requestAnimationFrame Demo

Dalam demo JavaScript dari Matt West ini, lihat bagaimana  requestAnimationFrame API dapat digunakan untuk memainkan dan membuat jeda.

5. How to ChartJS

Sebuah contoh penggunaan yang bagus dari inline comments yang mendemonstrasikan bagaimana membuat dua chart bergerak menggunakan ChartJS.

6. HTML5 Canvas Guide for Beginners

Panduan yang dikomentari dengan bagus dalam menggunakan Canvas, oleh Petr Tichy.

7. Convert GIF to CSS Animations

Terkadang kamu tidak memerlukan GIF untuk mendapatkan efek animasi yang bagus. Contoh yang hanya menggunakan CSS ini dari Joey Cheng merupakan contoh berguna tentang apa yang mungkin.

8. animateTransform Examples

Chris Coyier mendemonstrasikan bagaimana menggunakan animateTransform dari SVG.

9. CSS Transforms: 3D Example and TransitionEnd

Seringkali berguna untuk mengetahui ketika sebuah animasi telah selesai. Demo sederhana ini menunjukkan bagaimana kita dapat menggunakan JavaScript untuk mengetahui kapan sebuah animasi berakhir.

10. Switching Animation Keyframes in Media Queries

Salah satu contoh bagus untuk bookmark–contoh ini menunjukkan bagaimana kita dapat mengubah animasi menggunakan query media. Ubah ukuran layar untuk melihat efek!

Bonus: CSS Motion Paths

Terakhir, mari kita lihat sekilas ke dalam fitur animasi SVG dengan demo ini yang menunjukkan bagaimana property motion-path mengijinkan kita untuk membuat path yang kompleks untuk animasi.

Rangkuman!

Berikut hanyalah demo, blog dan walkthrough yang berguna, tersedia di CodePen. CodePen tidak hanya bagus untuk animasi; coba cari dan kamu akan menemukan semua jenis info dan demo yang membahas semua topik pengembangan web. Jelajahi, pelajari, dan selamat bersenang-senang!

Lebih Banyak Sumber Animasi

• Memulai Dengan Animasi Web
  
• Menambahkan Daya Tarik Pada Animasi Web oleh hormat kami
  
• 9 Course Populer Tentang Animasi CSS
• Course Pendek Baru: Sebuah Panduan Visual Animasi CSS oleh Kezz Bracey
• Mudah Dalam Cubic Bezier Function Dalam Course Coffee Break Kami oleh Guy Routledge