() translation by (you can also view the original English article)
Browser mobile kita semakin kuat dan lebih baik dalam menunjukkan animasi yang menakjubkan dan indah. Ketika dikombinasikan dengan kemampuan layout CSS, memungkinkan untuk membuat beberapa pekerjaan cantik tanpa menggunakan gambar sama sekali. Hasilnya scalable, loading cepat, dan ya, mengesankan untuk melihat.
Mari kita lihat hasil-hasil menakjubkan apa yang orang buat dan animasikan dengan hanya HTML dan CSS.
1. CSS Murni Pengendara Sepeda
Ada begitu banyak yang terjadi di sini, sulit dipercaya itu hanyalah HTML dan CSS! Animasi berputar dan berlipat ganda, gerakan berlapis menyatu membuatnya terlihat seperti pengendara sepeda ini dan sepedanya terbuat dari jelly. Penggunaan BEM yang baik juga pada penamaan class!
2. Saturnus CSS Murni Bermain Hula Hoop
Menggabungkan banyak bagian yang bergerak mampu membuat satu set elemen HTML sederhana layaknya animasi yang lebih kompleks, dan itulah yang dilakukan dengan baik oleh demo ini. Lihatlah bagaimana dua planet berinteraksi, sementara "partikel-partikel" yang berulang cukup tersebar untuk terlihat random.
3. Animasi CSS Warna Lapisan
Lapisan berwarna yang sederhana mungkin bukanlah apa-apa, tetapi ketika mereka bergerak mereka dapat membentuk banyak karakter. Dalam contoh ini, satu set paragraf tag HTML semi-transparan dianimasikan, dan animasi bertumpuk yang dihasilkan sangat menghipnosis.
4. Ice-Cream Loader
Kita tidak selalu memerlukan JPG atau PNG untuk membuat gambar yang indah, dan ini adalah contoh nya. Sebuah wadah div dan empat lagi lainnya adalah yang diperlukan untuk membuat gambar loader es krim kecil nikmat ini. Kode yang dihasilkan jauh lebih kecil daripada GIF animasi.
5. Merpati CSS Murni
Saat Anda menggabungkan penggunaan artistik elemen HTML dengan beberapa animasi karakter, inilah hasilnya. Animasi luar biasa halus namun menyenangkan. Hormat untuk Julia Muzafarova akan apa yang pasti sangat mengesalkan membangun semua set keyframes itu. Dan juga kopi yang banyak!
6. Kucing Tidur
Membawa banyak elemen HTML sederhana dengan kehalusan, animasi menyenangkan, kucing mengantuk ini memiliki banyak karakter. Contoh ini menggunakan Sass, dan variabel untuk mengontrol animasi. Cobalah mengubah beberapa untuk melihat apa yang terjadi!
7. Beruang Hitam
Animasi yang halus bisa didapatkan saat menggunakan HTML dan CSS, terutama saat kita mengikuti pedoman dasar. Animasi ini membuat jumlah elemen menjadi minimum, dan penggunaan transformasi yang hebat.
8. Spons CSS
Animasi cepat mampu menambahkan banyak karakter bila dikombinasikan. Dalam demo ini, lihatlah bagaimana gelembung dan percikan dipadu-padankan bersama-sama untuk membuat animasi lucu dengan sebuah spons yang bahagia, semua tanpa gambar.
9. Checkbox Mail CSS Murni
Serangkaian animasi keyframe dapat mengungkapkan sebuah cerita atau membantu orang-orang memahami apa yang mereka lihat. Di sini kita melihatnya membuka amplop dan mendapatkan surat.
10. Preloader Mobil
Sedikit gerakan halus dapat membuat perasaan intensitas yang hebat! Loader ini terdapat mobil tampak seperti sedang melaju bersama, semua diciptakan dengan beberapa elemen dan animasi CSS. Dengan tidak ada gambar, animasi ini akan cepat dimuat.
Terinsipirasilah!
Terima kasih seperti biasa untuk CodePen dan ide kreatif di belakang demo ini; mereka tentunya telah memberikan kita banyak inspirasi dalam contoh-contoh animasi ini. Lihatlah artikel berikut ini untuk inspirasi serupa, dan untuk mempelajari cara membuat animasi CSS Anda sendiri!
