30 Animasi CSS Keren Yang Harus Kamu Lihat

Kami sebelumnya telah mempublikasikan efek teks kreatif yang dapat Anda buat dengan CSS, dan banyak hal keren lainnya yang menurut Anda tidak mungkin dibuat dengan CSS. Namun kompilasi ini berfokus pada banyak hal yang dapat Anda animasikan dengan CSS, dan banyak dari kreasi ini akan membuat Anda menaikkan satu atau dua alis..

Dari memuat animasi ke matikan, dan modal jendela untuk mengguncang elemen, tumpukan ini 30 penggunaan animasi CSS yang tidak biasa dan kreatif dapat membuka pikiran Anda untuk lebih banyak cara Anda bisa bermain dengan animasi CSS yang mungkin belum pernah Anda pikirkan sebelumnya.

CSS Memuat Animasi Oleh patrikhjelm

Tujuh titik animasi bergeser ke kiri dan kanan untuk menandakan tindakan pemuatan.

Ikon Keranjang Belanja Animasi oleh jonitrythall

Efek animasi lucu ketika bahan makanan ditambahkan ke keranjang belanja. Gulir ke bawah untuk lebih banyak.

Hamburger hanya CSS3 animasi oleh Dawid Krajewski

Dibangun dengan CSS murni, tanpa JS atau yang lainnya.

404 animasi Character By With An Es

Setidaknya dengan halaman kesalahan ini, seorang pengembang sedang mengerjakannya. Bahkan jika itu adalah 404.

CSS Mars Landing oleh mgitch

Kami telah mendarat di Mars! Dibuat dengan CSS.

The Avenger By mariosmaselli

Bisakah Anda mendengar kemarahan raksasa mengguncang layar? Keren, benar?

Siang / Malam beralih oleh jsndks

Sekarang, Anda dapat beralih siang dan malam dengan CSS. Ide jenius!

Aplikasi Google Now pihak ke-3 oleh codecalm

Aplikasi pihak ketiga Google Now, dianimasikan.

Clo clo Oleh judag

Apakah ayam jantan bergerak seperti itu? Anda bertaruh tidak, lengkap dengan leher jiggy. Praktik CSS3 yang bagus.

Ikon menu animasi oleh mariusbalaj

Sebuah ide sederhana diterapkan; lihat tombol menu terwujud ketika Anda menggulir ke bawah.

Preloader CSS lain oleh Maseone

Animasi loading CSS berirama yang mengagumkan. Hipnotis, bukan??

Tombol kirim oleh auginator

Klik untuk mengirim, dan tombol menjiwai proses pemuatan hingga pengiriman selesai!

Desain Bahan Sidebar SVG Elastis oleh suez

Seret bilah putih ke kanan untuk melihat efek bilah samping elastis.

Tombol partikel oleh igcorreia

Lakukan apa yang dikatakan tombol: arahkan kursor ke kehebatan.

Tombol Gooey Oleh Lucas Bebber

Klik untuk efek Gooey. Anda akan mendapatkannya setelah Anda melihatnya, dan Anda akan mengklik beberapa kali lagi. Amir?

Tombol Flipside Oleh hakimel

Klik di sisi mana saja dari tombol Hapus dan tombol akan membalik sesuai tempat Anda mengklik.

Menu hamburger sejati! Oleh CharlesSmart

Menu hamburger yang benar-benar nikmat. Klik hamburger untuk mengetahui efeknya

Jelajah oleh yy

Lihat pergi sepeda motor.

Gelombang kubus 3D Oleh waddington

Holy 3D Cube-sicles!

Animasi tanda tangan By drygiel

Inilah tanda tangan yang sebenarnya bukan animasi GIF, melainkan urutan PNG yang dianimasikan dengan CSS3.

Animasi gradien latar belakang Oleh quasimondo

Trik ini mengubah gradien latar belakang dari satu warna ke warna lain dalam bentuk yang halus dan kontinu.

Ikon Star wars toggle Oleh rss

Menu hamburger diubah menjadi lightsabers dalam pertempuran (umpan silang).

Animasi Gaya GIF Oleh jascha

Tonton saat foto terwujud dari tengah-tengah seni piksel.

Fokus input animasi masuk / keluar Dengan fluxus

Sebuah pena animasi kecil menulis di atas forom yang Anda isi.

Segitiga kromatik dengan felipedefarias

Ilusi optik yang mengagumkan, ya, dilakukan dengan CSS3.

Pembuat kopi oleh thisroroger

Ini pengingat untuk minum kopi setiap hari. Seperti kamu membutuhkannya.

Chrome Dinosaur Oleh nickspiel

Tidak dapat menjangkau halaman yang Anda inginkan karena koneksi terputus? Inilah dinosaurus yang selalu Anda lihat ketika itu terjadi, hanya saja kali ini ia berlari dari meteorit!

CSS shake By elrumordelaluz

Arahkan setiap efek untuk menonton si kecil bergetar.

Newton's Cradle Loader Oleh All Things Smitty

Jika Anda tahu fisika, Anda tentu tahu tempat lahir Newton, tetapi mungkin tidak seperti ini.

Luncurkan Modal By koolhaus

Klik untuk melihat animasi jendela modal yang bagus dan halus.

Walking Robot Oleh P233

Robot ini terus berjalan, berjalan, dan berjalan, mengitari sumbu Y.

Meregangkan Panah Paginasi Oleh Hakim

Dari halaman pertama hingga yang terakhir, animasi pagination ini menunjukkan dengan jelas bagaimana jika Anda faring, pagewise.

Sekarang Baca: 15 Efek Teks Cantik Dibuat dengan CSS