Stylie - Pembuat Animasi Web CSS Gratis

Jika Anda berjuang dengan sintaksis CSS3 dan ingin cara sederhana untuk membuat animasi Stylie adalah alat yang hebat untuk menyimpan.

Ini adalah salah satu dari banyak yang gratis generator kode dengan fokus pada efek animasi CSS murni. Stylie benar-benar gratis dan bersumber terbuka, di-host di GitHub dan didukung oleh perpustakaan keyframe bernama Rekapi.

Perpustakaan Rekapi tidak menggunakan JavaScript, jadi ini merupakan alternatif untuk CSS murni. Dan untungnya, aplikasi web Stylie mendukung kedua metode, jadi Anda bisa ekspor kode dalam CSS murni atau JavaScript.

Secara default, halaman pertama memuat demo animasi berkelanjutan dengan animasi linier. Anda dapat bermain dengan ini dengan mengedit pengaturan default dalam Tab gerak atau dengan mengedit Tab keyframes.

Di daftar keyframes, Anda bisa tambahkan keyframe baru, edit total durasi mereka, dan ubah gaya animasi, termasuk gerakan berdasarkan sumbu X / Y.

Pertama, ini akan terlihat sangat membingungkan, terutama jika Anda belum pernah melakukan animasi keyframe sebelumnya. Namun, semakin Anda bermain dengan aplikasi ini semakin masuk akal.

Secara default, Anda akan memiliki satu ton opsi pelonggaran yang berbeda untuk mengacaukan dan mereka semua sangat mudah untuk disesuaikan.

Itu Grafik gerak jauh lebih sulit untuk dipelajari tetapi memberi Anda jauh lebih banyak kontrol atas pelonggaran animasi Anda. Stylie bahkan membiarkanmu menyimpan efek gerak khusus dan gunakan kembali ini di tab Keyframes untuk animasi lainnya.

Jika saya bisa mengeluh tentang satu hal itu adalah aplikasi web kurangnya desain yang responsif.

Saya tidak bisa mendapatkan seluruh aplikasi untuk masuk ke layar 13 "MacBook Pro saya bahkan dengan browser sepenuhnya dimaksimalkan. Ini dapat menjadi masalah karena halaman tidak memiliki scrollbar vertikal dan banyak pilihan (seperti kode yang diekspor) ditemukan lebih rendah di panel pengaturan.

Tapi selain dari gangguan kecil ini, saya membuatnya bekerja dengan baik pada monitor saya yang lebih besar. Dan, itu kualitas ekspor tidak seperti apa pun yang akan Anda temukan di web.

Mengintip aplikasi Stylie untuk melihat cara kerjanya dan mencoba mengutak-atik beberapa opsi. Setelah Anda membuat animasi, Anda bisa ekspor CSS atau JavaScript dan gunakan itu untuk proyek apa pun yang Anda suka.

Jika Anda kesulitan mempelajari antarmuka, Anda juga dapat menonton tutorial singkat ini yang panjangnya sekitar 9 menit dan mencakup semua fitur utama.