20 Animasi CSS Terbaik di CodeCanyon

Ada suatu waktu dalam sejarah internet ketika Anda harus menggunakan Flash jika Anda ingin menambahkan beberapa efek visual ke situs Anda selain animasi GIF. Fast forward ke hari ini, dan kami menemukan Flash telah mati dan hal-hal seperti CSS3 dan HTML5 membawa animasi dan efek fantastis ke web.

Jika Anda ingin menambahkan beberapa animasi CSS terbaik untuk situs web atau proyek web berikutnya, berikut adalah daftar 20 terbaik animasi CSS di CodeCanyon untuk dapat Anda mulai:

1. Aero - CSS3 Hover Effects

Tambahkan beberapa efek hover gambar kaca berbayang dengan Aero - CSS3 Hover Effects.

Ini sepenuhnya responsif dan mudah digunakan, dan Anda juga akan menemukan:

• kemudahan untuk mengubah warna dan beralih dari lingkaran ke kotak
• kompatibel dengan semua browser—bahkan Microsoft Edge
• kompatibel dengan SASS
• CSS yang dapat disesuaikan
• dan banyak lagi!

Dengan 10 efek yang disertakan dalam rilis dan efek lain yang menyusul, Aero - CSS3 Hover Effects adalah bundel manis animasi CSS untuk efek hover gambar Anda.

2. MegaHover Mouse Over Effects

MegaHover Mouse Over Effects menawarkan batch efek yang kuat dari efek hover gambar CSS3 yang kompatibel dengan Bootstrap 3.

Ini juga:

• menggunakan ikon Font Awesome
• kompatibel dengan berbagai macam browser
• responsif sepenuhnya
• dan banyak lagi

Mudah mengintegrasikan dan memodifikasi MegaHover Mouse Over Effects ke ratusan efek hover yang bagus.

3. Animatia - CSS Image Hover Effects

Mudah digunakan, waktu loading minimal, sangat mudah dikustomisasi? Animatia - CSS Image Hover Effects melakukan ini dan lebih.

Batch CSS ini mencakup:

• lebih dari 115 efek hover yang mudah dikustomisasi
• sepenuhnya responsif dan file yang mudah-untuk-digunakan
• murni CSS3 dan ikon Font Awesome
• dan banyak lagi

Gunakan Animatia - CSS Image Hover Effects style tombol, overlay efek, teks, dan animasi CSS lain.

4. Hover Effects Framework

Hover Effects Framework adalah solusi animasi CSS yang benar-benar luwes.

Kode yang bersih, sepenuhnya responsif, dan:

• IcoMoon Ultimate Font
• 4 macam bentuk dan 5 macam warna
• 50+ animasi
• dan banyak lagi

Hover Effects Framework memiliki kode yang bersih, dan terbaik dari semuanya, mencakup banyak contoh-contoh untuk membantu Anda memulai dengan beberapa animasi CSS yang bagus.

5. Collection of Preloaders

Anda mungkin tidak perlu lagi mengkoleksi preloaders lainnya setelah Anda mendapatkan Collection of Preloaders.

Anda akan menerima:

• dokumentasi yang baik untuk digunakan dalam kustomisasi yang mudah
  
• satu set animasi CSS3 yang ringan dan fleksibel
• 27 preloaders unik

Sepenuhnya ramah untuk mobile, Collection of Preloaders merupakan tambahan yang bagus untuk toolbox CSS3 siapa pun.

6. CSS3 Image Hover Effects

Jika Anda pernah melihat satu animasi CSS untuk efek hover gambar, Anda telah melihat mereka semua, kan?

Belum tentu.

CSS3 Image Hover Effects memasukkan beberapa efek yang benar-benar unik dan menarik.

Termasuk:

• 22 efek hover gambar CSS3 yang berbeda
• sepenuhnya mengagumkan dan responsif
• kode CSS3 yang bersih
• dan banyak lagi

Periksa CSS3 Image Hover Effects yang kompatibel dengan Bootstrap.

7. Image Hover CSS Library

Image Hover CSS Library adalah kumpulan pustaka animasi CSS hover gambar yang dapat diubah-ubah ukurannya, ringan yang layak untuk dilihat.

Ini adalah koleksi berkelas dari 58 class efek hover, di-minified hanya menjadi 25 KB.

• bekerja dengan setiap konten hover
• efek hover yang unik
• mudah digunakan
• dan banyak lagi

Sulit untuk memisahkan diri dari animasi CSS hover gambar lainnya, tetapi Image Hover CSS Library telah melakukannya.

8. SVG Logo Scroll Animation | CSS3 and Javascript

Sangat baik untuk melepaskan diri dari animasi CSS yang biasa—efek hover gambar—dan melihat sesuatu seperti SVG Logo Scroll Animation | CSS3 and Javascript.

Hanya kurang dari 4k, menambahkan beberapa animasi gulir halaman SVG yang indah.

Membangun beberapa animasi indah halaman web dengan SVG Logo Scroll Animation | CSS3 and Javascript.

9. Viavi CSS3 Scroll Effects

Viavi CSS3 Scroll Effects adalah solusi animasi gulir CSS3 HTML yang benar-benar bagus.

Beberapa fitur meliputi:

• 16 efek gulir CSS3
• implementasi sederhana
• sepenuhnya responsif
• dan banyak lagi

Menggunakan sistem grid semuanya dan sentuhan-diaktifkan untuk penggunaan mobile, Viavi CSS3 Scroll Effects tidak hanya terlihat bagus, tetapi juga dapat diimplementasi dengan baik.

10. CSS3 Spinners & Loaders

Perlu loader tanpa GIF?

Tidak masalah. CSS3 Spinners & Loaders memberikannya.

• menemukan variasi-variasi yang lebih dari 25
• mudah untuk disesuaikan
• mudah untuk dikembangkan

CSS3 Spinners & Loaders didokumentasikan dengan baik dan solusi CSS penuh untuk spinner and loader.

11. Midix - CSS3 Animation Effects without jQuery

Menggunakan CSS3 murni, Midix - CSS3 Animation Effects without jQuery memberikan serangkaian padat 16 animasi CSS.

Anda dapat menyesuaikan:

• kecepatan animasi
• penundaan animasi
• warna ikon

Anda tidak akan hanya menerima koleksi indah animasi CSS dengan Midix - CSS3 Animation Effects without jQuery, tetapi juga update gratis dan dukungan yang ramah.

12. CSS3 Hover Effects

CSS3 Hover Effects merupakan pilihan yang baik.

Anda dapat dengan mudah mengubah:

• warna
• ukuran border
• lingkaran ke kotak
• jarak antara blok teks

Dengan 479 ikon retina dan 20 efek yang berbeda, CSS3 Hover Effects adalah sumber daya yang besar untuk dimiliki dan digunakan.

13. VSPreloader - Ultimate CSS Animated Preloaders

Sejak animasi preloaders berjalan, VSPreloader - Ultimate CSS Animated Preloaders adalah salah satu solusi yang lebih unik, kreatif, dan tampak bagus yang akan Anda temukan.

Termasuk fitur:

• 60 bantuan
• 40 present
• 30 animasi
• warna yang tak terbatas

Ini juga sangat tajam dan unik.

Lihatlah lebih dekat pada VSPreloader - Ultimate CSS Animated Preloaders. Saya pikir Anda akan terkesan.

14. Heed - Pure CSS3 Animation Effects

Heed - Pure CSS3 Animation Effects menyediakan semua yang Anda inginkan dalam koleksi animasi CSS.

Sangat mudah untuk menginstal, mengubah, dan mengkonfigurasi dengan SCSS (file termasuk).

• 20 pilihan warna material design
• Ikon Font Awesome
• 15 efek
• dan banyak lagi

Heed - Pure CSS3 Animation Effects adalah ramah dengan retina, dukungan yang ramah, dan termasuk update gratis.

15. Ayan - CSS3 Link Hover Effects

Sementara sebagian besar animasi CSS yang Anda temukan terfokus pada efek gambar dan halaman, Ayan - CSS3 Link Hover Effects menyediakan barisan efek hover link yang mengesankan.

Anda akan menemukan 30 CSS3 efek hover link yang terlihat bagus dan:

• kompatibilitas browser yang baik
• dokumentasi bantuan
• animasi modern
• dan banyak lagi

Bundel Ayan - CSS3 Link Hover Effects adalah kreatif, tajam, dan menambahkan sentuhan bagus animasi CSS tanpa terlalu mencolok.

16. Sinister - Pure CSS Image Hover Effects

Menawarkan lebih dari 100 efek hover, Sinister - Pure CSS Image Hover Effects menyediakan sejumlah mengesankan efek yang dirancang dengan baik.

Ini mencakup lebih dari:

• 22 efek transisi konten
• 18 efek transisi overlay
• 23 efek transisi tombol
• 100 efek hover

Tanpa menggunakan JavaScript atau jQuery, dan menggunakan CSS murni, Sinister - Pure CSS Image Hover Effects menghadirkan:

• zoom-in dan zoom-out
• memutar X dan memutar y
• memutar kanan dan kiri
• memutar dan skala
• transisi kubik
• hover lapisan
• dan banyak lagi

17. Stylish Social Media Animated Icons Style

Tambahkan beberapa animasi CSS yang bagus ke ikon media sosial Anda dengan Stylish Social Media Animated Icons Style.

Dengan desain yang bersih dan sembilan style yang berbeda untuk dipilih, Anda juga akan menikmati:

• implementasi mudah dan kustomisasi
• kode dasar yang solid dan dokumentasi
• tanpa ketergantungan gambar atau ikon
• kompatibilitas lintas-browser
• dan banyak lagi

Stylish Social Media Animated Icons Style menambahkan sentuhan bagus warna dan animasi CSS ke barisan ikon media sosial Anda.

18. CSS3 Animations

Dengan mudah menganimasikan div, p, dan body HTML dengan CSS3 Animations.

Ini adalah potongan bagus yang dapat digunakan dan diterapkan dalam banyak situasi desain berbeda.

Termasuk fitur:

• mudah untuk digunakan dan disesuaikan
• hanya CSS3, tanpa JavaScript
• 10 + animasi

Akankah Anda menambahkan CSS3 Animations ke toolbox desain Anda?

19. Pure CSS3 Image Accordion

Bangun setup slider Anda sendiri atau yang serupa menggunakan Pure CSS3 Image Accordion untuk beberapa animasi CSS yang bagus.

Itu adalah:

• sepenuhnya responsif
• tanpa fixed width
• empat pilihan teks
• mudah untuk menyesuaikan

Membuat beberapa musik visual dengan Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

Lelah tooltips sederhana?

Tambahkan beberapa sihir animasi CSS menggunakan CSS3 Mega Tooltip Animation Pack.

Paket tooltip animasi CSS ini meliputi:

• 10 efek animasi
• 8 preset warna
• dokumentasi
• dan banyak lagi

CSS3 Mega Tooltip Animation Pack juga termasuk kompatibilitas Internet Explorer.

Kesimpulan

Bahkan dengan banyak animasi CSS yang berbeda tersedia di Envato Market, mungkin Anda masih belum menemukan apa yang Anda cari.

Bukan masalah. Anda dapat mengembangkan milik Anda sendiri!

Periksa ebook Envato seperti Menguasai CSS3, ambil salah satu dari banyak kursus kode berbeda yang ditawarkan, atau temukan dan ikuti Tutorial Code CSS3.