Membina Animasi CSS Percuma Mudah dengan Animista

Disana ada tan apl animasi CSS web dalam talian. Tetapi, sangat sedikit berbanding dengan tahap terperinci dan kemudahan penggunaan yang anda dapatkan Animista.

Aplikasi web percuma ini membolehkan anda menjana animasi CSS tersuai dengan mengklik butang. Anda memilih antara gerakan yang direka khas seperti slaid, mengubah, buaian, dan juga animasi drop shadow.

Sebaik sahaja anda membuat animasi anda, anda boleh mengeksport kod sama seperti penjana CSS lain. Kecuali, kod ini lebih mudah untuk digunakan dan bahkan dilengkapi dengan alat pengurangan terbina dalam.

Antara muka boleh berasa mengelirukan pada mulanya tetapi itu hanya kerana berapa banyak pilihan yang anda ada!

Anda membina animasi tersuai berikut tiga langkah utama dan menggunakan antara muka dari atas ke bawah:

1. Pilih gaya gerakan (swing, slaid, flip-scale) dari kalangan di bahagian atas
2. Peribadikannya dengan jenis gerakan yang berbeza di bawah
3. Edit pilihan animasi anda dalam bar pilihan sebelah kiri terapung

Melalui proses ini, anda boleh mengubah tempoh jumlah animasi, gaya pelonggaran, kelewatan, hampir segalanya. Dan semuanya berfungsi melalui CSS3 tulen, yang menjadikannya lebih menarik lagi.

Juga ambil perhatian pada navbar yang paling atas, anda juga boleh memilih antara pelbagai jenis gaya sasaran animasi.

The lalai adalah “asas” yang boleh berfungsi dengan apa sahaja (hover, click, atau animasi segera). Sasaran lain termasuk teks halaman, animasi latar belakang, dan juga animasi masuk tersuai untuk membawa unsur halaman tersembunyi ke dalam pandangan.

Saya terutamanya suka “perhatian” pautan di bahagian atas yang mempunyai beberapa goncangan sejuk & kesan jitter untuk gaya butang. Ini berfungsi dengan baik pada butang CTA untuk menarik perhatian dan menggalakkan interaksi pengguna.

Sebaik sahaja anda selesai melakukan penyesuaian, anda hanya klik ikon pendakap kecil di sudut kanan atas anak tetingkap pratonton.

Ini membawa halaman baru ke dalam pandangan kelas animasi CSS penuh anda, bersama-sama dengan kerangka utama. Ciri pilihan membolehkan anda tolakkan kod itu dan termasuk auto-prefixer yang menyokong penyemak imbas web yang lebih lama.

Saya telah menggunakan banyak alat animasi CSS tersuai dan tidak hairanlah Animista adalah alat yang paling kaya dengan ciri di luar sana. Ia benar-benar percuma dan sedikit rumit pada mulanya tetapi sebaik sahaja anda memahami antara muka, ia adalah penjana terbaik yang boleh anda gunakan.

Untuk mencubanya, lawati laman utama dan klik “Cuba saya”. Anda juga boleh berkongsi pemikiran & pujian anda dengan pencipta aplikasinya @ ana108.