CSS3 syntaxı ile animasyonlar oluşturmak için uğraşıyorsunuz ve bunun için basit bir yol arıyorsanız Stylie CSS web animasyonu için mükemmel bir araçtır.
Stylie, saf CSS animasyon efektlerine odaklanan birçok ücretsiz kod üreticisinden biridir. Stylie, tamamen ücretsiz ve açık kaynağa sahip, GitHub‘da barındırılan ve Rekapi adlı bir ana kare kitaplığı tarafından desteklenmektedir.
Rekapi kitaplığı JavaScript kullanıyor, bu nedenle saf CSS’ye bir alternatif. Stylie web uygulaması her iki yöntemi de destekliyor, böylece kodu saf CSS veya JavaScript’e verebilirsiniz.
Varsayılan olarak, ilk sayfa doğrusal bir animasyona sahip sürekli bir animasyon demosunu yükler. Bunu, hareket sekmesindeki varsayılan ayarları düzenleyerek veya Anahtar kareleri sekmesini düzenleyerek oynayabilirsiniz.
Ana kareler listesinde, yeni ana kareler ekleyebilir, toplam sürelerini düzenleyebilir ve X / Y eksenine dayalı hareketler de dahil olmak üzere animasyon stillerini değiştirebilirsiniz.
Başlangıçta ana karenin animasyonu kafa karıştırıcı görünebilir. Bu karışıklığı üzerinde oynamalar yaparak anlayabilir ve istediğiniz animasyonu oluşturabilirsiniz.
Hareket grafiği öğrenmek çok daha zor ancak animasyonunuzun hafifletilmesi üzerinde size daha fazla kontrol imkanı sağlıyor. Stylie, özel hareket efektlerini kaydetmenize ve bunları diğer animasyonlar için Keyframes sekmesinde yeniden kullanmanıza olanak tanır.
O kadar övdükten sonra gelelim eksi yönlerine. Web uygulamasının responsive tasarımda eksikliği olduğunu düşünüyorum. Küçük ekranlı bilgisayarda ekrana sığmayabiliyor. Kaydırma çubuğunun olmayışı sorun olabilir.
Ancak bu küçük can sıkıntısının yanı sıra, daha büyük monitörde iyi çalışıyor. Ve export kalitesi fena 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 veya JavaScript’i dışa aktarabilir ve istediğiniz herhangi bir proje için kullanabilirsiniz.
Arayüzü öğrenirken sorun yaşıyorsanız, bu kısa dersin yaklaşık 9 dakikalık bir sürede ve tüm önemli özellikleri kapsayacağını da izleyebilirsiniz.
Bu makalede ücretsiz CSS web animasyonu oluşturabileceğiniz, CSS veya JavaScript olarak dışa aktarabileceğiniz Stylie web uygulamasından bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.
