7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Animation

10 Contoh Animasi di CodePen Yang Dapat Kamu Pelajari

Read Time: 2 mins

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.