Stylie - Pembuat Animasi Animasi CSS Web

Jika anda perjuangan dengan sintaks CSS3 dan mahu cara mudah untuk membuat animasi Stylie adalah alat yang hebat untuk menyelamatkan.

Ini adalah salah satu daripada banyak percuma penjana kod dengan fokus pada kesan animasi CSS murni. Stylie adalah percuma dan sumber terbuka, dihoskan pada GitHub dan dikuasakan oleh perpustakaan utama yang dipanggil Rekapi.

Perpustakaan Rekapi tidak menggunakan JavaScript, jadi ini alternatif kepada CSS tulen. Dan syukurlah, aplikasi web Stylie menyokong kedua-dua kaedah, jadi anda boleh kod eksport sama ada CSS atau JavaScript tulen.

Secara lalai, halaman pertama memuat demo animasi berterusan dengan animasi linear. Anda boleh bermain dengan ini dengan mengedit tetapan lalai di dalam Tab Motion atau dengan mengedit Tab kerangka kunci.

Dalam senarai utama, anda boleh tambah kerangka kunci baru, mengedit jumlah tempoh mereka, dan ubah gaya animasi, termasuk pergerakan berdasarkan paksi X / Y.

Pertama, ini akan kelihatan sangat mengelirukan, terutamanya jika anda tidak pernah melakukan animasi keyframe sebelum ini. Walau bagaimanapun, semakin banyak anda bermain dengan aplikasi ini lebih masuk akal.

Secara lalai, anda akan mempunyai tan pilihan pelonggaran yang berbeza untuk merosakkan dan mereka semua sangat mudah untuk menyesuaikan diri.

The Grafik gerakan adalah lebih sukar untuk belajar tetapi ia memberi anda lebih banyak kawalan ke atas pembebasan animasi anda. Stylie juga membolehkan anda menyelamatkan kesan gerakan adat dan gunakan semula ini dalam tab Key Frames untuk animasi lain.

Sekiranya saya boleh mengadu tentang satu perkara, aplikasi web ini kekurangan reka bentuk responsif.

Saya tidak dapat mendapatkan keseluruhan aplikasi itu untuk disesuaikan dengan 13 "skrin MacBook Pro walaupun dengan pelayar dimaksimumkan sepenuhnya.Ini boleh jadi masalah kerana halaman tidak mempunyai bar skrol menegak dan banyak pilihan (seperti kod yang dieksport) telah dijumpai lebih rendah dalam tetingkap tetapan.

Tetapi selain dari gangguan kecil ini, saya dapat bekerja dengan baik pada monitor saya yang lebih besar. Dan juga kualiti eksport seperti apa-apa lagi yang anda akan dapati di web.

Mengintip app Stylie untuk melihat bagaimana ia berfungsi dan cuba mengutak-atik beberapa pilihan. Sebaik sahaja anda membuat animasi anda, anda boleh eksport CSS atau JavaScript dan menggunakannya untuk apa-apa projek yang anda suka.

Sekiranya anda mengalami masalah pembelajaran antara muka, anda juga boleh melihat tutorial ringkas ini selama kira-kira 9 minit dan meliputi semua ciri utama.