Bekle ve CSS Animasyonlarını BEKLEYİN! canlandırmak
Saf CSS animasyonu ile yapabileceğiniz çok şey var, ama Bir animasyonu duraklatmak ve ilmeklemek mümkün değildir mevcut W3 spec ile.
Ancak, ücretsiz bir araçla BEKLEYİN! canlandırmak aslında yapabilirsin sıfırdan ilmekli animasyonlar oluşturun ile özel gecikmeler Her döngü arasında. Bu sıradan bir görev gibi görünebilir ancak birçok geliştirici için bir acı noktası çözer..
Adı verilen bir CSS özelliği olduğu belirtilmelidir. Animasyon gecikme hangi geciktirir başla CSS animasyonunun açıklaması. Ancak o yinelenen bir animasyonu etkilemez sadece başlangıç noktasını geciktirdiğinden.
BEKLEYİN! canlandırmak otomatik hesaplar Özel animasyon anahtar karelerinin içine ne kadar duraklama yapılması gerektiği tam duraklama süresi oluşturmak döngüler arasında ihtiyacın var. Bu elle yapılabilir, ancak çok can sıkıcı bir şey değil, çok sarsılmış..
Bu web uygulaması yapabilir Herhangi bir CSS3 animasyon özelliği ile çalışmak, dönmeler ve dönüşümler dahil. Herhangi bir yeni CSS özelliği yazmıyorsunuz, bunun yerine anahtar kareler özelliği üzerine inşa yaratmak yüzdelere dayalı duraklamalar (% 0 ile% 100 arasında) animasyon içinde.
Görmek için ana sayfaya göz atın eylemde birkaç örnek. Yapabilecekleriniz ve kaynak kodun kendi çalışmanıza kopyalamak / yapıştırmak için olduğu yerde oldukça açık..
Lütfen bunu unutmayın tam teşekküllü bir kütüphane değil. Bu bir jeneratör anında CSS kodunuzu oluşturur Animasyon gecikmesi için neye ihtiyacınız varsa.
Site dışında daha basit bir çözüm istiyorsanız, o zaman Sass mixin'i indirin. Bu biraz daha zor çünkü Sass haritası gerektirir, bu yüzden özel özellikleri nasıl ekleyeceğinizi anlamanız ve sözdiziminizi doğru yazmanız gerekir..
İşte nasıl bir örnek mixin'i ara:
@ include waitAnimate ((animationName: animName, anahtar kareler: (0: (dönüş: ölçek (1), arka plan rengi: mavi), 50: (dönüş: ölçek (2), arka plan rengi: yeşil), 100: (dönüş) : ölçek (3), arka plan rengi: kırmızı)), süre: 2, waitTime: 1, zamanlamaFonksiyon: kolaylığı, yinelemeCount: sonsuz));
Pro web geliştiricileri, ipleri öğrenmek ve bunları yeniden kullanılabilir bir karışıma dönüştürmek konusunda sorun yaşamamalıdır. Ancak acemi geliştiriciler çalışmasını sağlamak için mücadele edebilir, bu nedenle web uygulaması.
Hepsi bu kaynak kodu ücretsiz GitHub'da Yerel olarak bir kopya indirmek istiyorsanız. Ancak bu çok garip bir özellik olduğundan, birçok projede muhtemelen ihtiyaç duyacağınız bir şey değildir. Bu yüzden BEKLEYİN! Animate web uygulaması size yardımcı olmak için fazlasıyla yeterli olmalıdır bir kerelik sorunu çözmek arasında saf CSS ile döngüsel animasyonları geciktirme.
Aynı zamanda tasarım açısından oldukça belirsiz olan gerçekten eğlenceli bir kesmek. Fakat bu, CSS3 ile ne kadar mümkün olduğunu ve biraz ustalıkla ortaya çıkabileceğini gösteriyor..
