CodePen dengan cepat menjadi tempat untuk memamerkan apa yang bisa kita lakukan dengan kreasi web kami. Berikut adalah daftar dari beberapa hal luar biasa yang telah diciptakan orang-orang dengan animasi CSS baru-baru ini!

1. Jam Mickey JavaScript

Jam tangan Mickey yang mirip Apple watch oleh Jay Salvat (@jaysalvat).

Ini adalah contoh yang indah dari menggabungkan transisi CSS, grafis SVG dan JavaScript untuk memposisikan tangan pada wajah lucu Mickey Mouse.

2. Kapal Selam CSS

Kapal selam dengan CSS oleh Alberto Jerez (@ajerez).

Penggunaan cantik dari kontainer lubang-port berbentuk melingkar ini memberikan CSS-animasi kapal selam ini banyak pesona.

3. ASCII AT-AT

AT-AT oleh Tim Pietrusky (@TimPietrusky).

Terinspirasi pengangkut personel AT-AT Star Wars, digambar dengan menggunakan teks dengan warna-warna yang berulang di CSS. Efek yang funky.

4. Loader SVG/CSS

Loader SVG/CSS oleh Bidji (@Bidji).

Loader ini menggunakan perubahan warna untuk memberikan kesan berputar.

5. CSS Tardis 3D

CSS Tardis 3D oleh Gerwin van Royen (@Gerwinnz).

CSS dapat digunakan untuk membuat beberapa efek 3D yang menakjubkan. Inilah tardis 3D:

6. Burung Mengantuk

Burung Mengantuk oleh Peter Klein (@pmk).

Gaya seni sederhana dan jumlah yang tepat dari animasi ini memberikan burung mengantuk ini ilusi kehidupan.

7. Animasi border CSS murni

Animasi border CSS murni tanpa SVG oleh Rplus (@rplus).

Sederhana namun sangat efektif menggunakan border CSS untuk membuat animasi loading-bergaya.

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens di CSS oleh Donovan Hutchinson (@donovanh).

Judul film Star Wars mendatang yang dibuat menggunakan CSS, HTML dan sedikit JavaScript.

9. Synth 3D

Synthesizer 3D CSS Murni (mousedown untuk rotasi) oleh Nikolay Talanov (@suez).

Cobalah kunci-kuncinya dan putar synth 3D ini yang dibuat dengan menggunakan CSS. Pekerjaan yang menakjubkan:

10. Cascading Solar System

Cascading Solar System! oleh Tady Walsh (@tadywankenobi).

Model sistem tata surya kita, lengkap dengan skala kecepatan rotasi, bulan dan rincian pada masing-masing planet yang lebih besar. Bahkan matahari adalah tangkapan langsung dari yang asli!

11. Tata Surya 3D

Tata Surya 3D sepenuhnya CSS oleh Wayne Dunkley (@waynedunkley).

Tata surya yang lain, tapi kali ini dalam 3D. Penggunaan indah dari shading.

12. Desain Kamera Flat

Desain Kamera Flat dengan animasi CSS oleh Damien Pereira Morberto (@damienpm).

Tekan tombol shutter pada kamera flat ini untuk melihat ia membuat foto menggunakan animasi CSS.

13. Transisi Siang Hari dan Malam Hari

Simulasi Siang Hari dan Malam Hari oleh Szymon Stypa (@Catagen).

Tekan tombol untuk melihat siang hari berubah menjadi malam hari.

14. Menganimasikan Sprite dengan CSS

Menganimasikan sprite dengan CSS oleh Avaz Bokiev (@samarkandiy).

Demonstrasi bagaimana urutan gambar (sprite) dapat digunakan untuk membuat animasi stop-motion, lengkap dengan gerakan maju dan mundur.

15. Dodecahedron

Dodecahedron oleh wontem (@wontem).

Dodecahedron yang halus, indah dibuat dan dianimasikan sepenuhnya dengan CSS.

Kesimpulan

Belum lama ini, kita akan bersandar pada Flash atau JavaScript yang sesuai untuk animasi di-browser. Browser Modern telah membawa dukungan yang lebih baik untuk CSS, dengan akselerasi perangkat keras 3D dan animasi.

Terima kasih untuk situs seperti CodePen, kita dapat berbagi dan belajar lebih mudah dari sebelumnya. Demo Animasi apa yang paling menginspirasi yang telah Anda lihat baru-baru ini?