Stylie - Ücretsiz Bir CSS Web Animasyon Oluşturucu

CSS3 sözdizimi ile mücadele ediyorsanız ve bir animasyon oluşturmanın basit yolu stylie kaydetmek için harika bir araçtır.

Bu bir çok özgür kod üreteçleri saf CSS animasyon efektlerine odaklanarak. Stylie tamamen ücretsiz ve açık kaynaklı, GitHub'da barındırılıyor ve Rekapi adlı bir anahtar kare kütüphanesi tarafından destekleniyor..

Rekapi kütüphanesi JavaScript kullanıyor, bu yüzden saf CSS'ye bir alternatif. Neyse ki, Stylie web uygulaması her iki yöntemi de destekliyor. kodu saf CSS veya JavaScript’te verme.

Varsayılan olarak, ilk sayfa doğrusal bir animasyon içeren sürekli bir animasyon demosu yükler. Düzenleyerek bununla oynayabilirsiniz Varsayılan ayarları içinde Hareket sekmesi veya düzenleyerek Anahtar kareler sekmesi.

Anahtar kare listesinde yeni anahtar kareler ekle, toplam sürelerini düzenle, ve animasyon stillerini değiştir, X / Y eksenine dayalı hareketler dahil.

İlk önce, bu bakacak son derece kafa karıştırıcı, özellikle daha önce hiç ana kare animasyonu yapmamışsanız. Ancak, bu uygulamayla ne kadar çok oynarsanız o kadar mantıklı olur..

Varsayılan olarak, bir ton farklı hareket hızı seçenekleri uğraşmak ve hepsi özelleştirmek için süper kolay.

Hareket grafiği öğrenmesi çok daha zor ancak animasyonun gevşemesi üzerinde size çok daha fazla kontrol kazandırıyor. Stylie size bile izin verir özel hareket efektlerini kaydet ve bunları tekrar kullan Diğer animasyonlar için Anahtar kareler sekmesinde.

Bir şey hakkında şikayet edebilseydim bu web uygulamasının duyarlı tasarım eksikliği.

Tüm uygulamanın tarayıcı tamamen büyütülmüş olsa bile 13 "MacBook Pro ekranıma sığmasını sağlayamadım. Sayfa dikey bir kaydırma çubuğu içermediğinden ve seçeneklerin çoğu (dışa aktarılan kod gibi) bulunduğundan bu sorun olabilir ayarlar bölmesinde daha düşük.

Ancak bu küçük sıkıntı dışında, daha büyük monitörümde düzgün çalışmasını sağladım. Ve ihracat kalitesi internette bulacağın hiçbir şey gibi değil.

Nasıl çalıştığını görmek ve bazı seçeneklerle uğraşmayı denemek için Stylie uygulamasına bir göz atın. Animasyonunuzu yaptıktan sonra, CSS’i veya JavaScript’i dışa aktarın ve bunu istediğiniz herhangi bir proje için kullanın.

Arayüzü öğrenme konusunda sorun yaşıyorsanız, yaklaşık 9 dakika süren ve tüm ana özellikleri kapsayan bu kısa öğreticiyi de izleyebilirsiniz..