HTML5 - Animasyonlar

Animasyonlar, geçişler gibi efektlerdir, ancak bir tarzdan diğerine değişiklik yapmak için daha fazla seçeneğin mevcut olması nedeniyle yapılabilecekler üzerinde üstün kontrol olması anlamında, işlevsellikleri gelişmiştir.
Animasyon özellikleri
Daha önce de söylediğimiz gibi, animasyonlar, üzerinde daha fazla kontrole sahip olmamızı sağlayan seçeneklerin ve özelliklerin sayısı nedeniyle geliştirilmiş geçişlerdir, her birini gözden geçireceğiz:

• animasyon gecikmesi: Animasyonu etkinleştirdikten sonra başlatabilmek için belirli bir süre uygulayın.
• animasyon yönü: Animasyonun geriye doğru mu yoksa değişen döngülerde mi oynatılacağını belirtir.
• animasyon süresi: Animasyonun oynatılması gereken zaman aralığını belirtir.
• animasyon-yineleme-sayısı: Animasyonun kaç kez tekrarlanması gerektiğini belirtir ve hatta değeri yerleştirebilir sonsuz Aynı şeyin sonsuz tekrarı için.
• animasyon adı: Animasyonun adını belirtir.
• animasyon oynatma durumu: Animasyonun duraklatılmasına ve ardından oynatmaya devam etmesine izin verir.
• animasyon-zamanlama-fonksiyonu: Animasyonda ara değerlerin nasıl ele alınması gerektiğini belirtin
• animasyon: Tüm animasyon özelliklerini tek bir CSS bildiriminde birleştirebileceğimiz kısayoldur ve aşağıdaki yapıya sahiptir:

animasyon:
Artık mevcut özellikleri bildiğimize göre, onu analiz etmek için örnek bir kod görelim:

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Bu örnekte, bunu yaparken görüyoruz. : üzerine gelin eleman üzerinde 100ms'lik bir gecikmemiz olacak, ardından animasyonun gerçekleştirilmesi için 500ms'lik bir gecikme olacak ve sonsuz sayıda tekrarlanacak.
Daha sonra uygulamaya verdiğimiz isim ile özelliği kullanacağımızı görüyoruz. @ana kareler hangi öğelerin canlandırılacağını size burada söyleyeceğiz.
Tarayıcımızda nasıl görünmesi gerektiğine bakalım:

BÜYÜT

Elemanın arka planında, sonra harfin renginde ve yazı tipinin boyutunda bir değişiklik olduğunu gördüğümüz gibi, animasyonun sonunda ilk durumuna geri dönüyor ve tüm bu işlem tekrarlanıyor, bu ona bir şey veriyor. geçişlerin kullanımı ile var olmayan hareket.
Bununla, aynı zamanda, ona bir atayabilmek için tanımlayıcı olarak çalıştığından, animasyon adının önemini de gösteriyoruz. @anahtar kareler.
Bununla öğreticiyi bitiriyoruz ve bununla belgelerimize daha fazla hareket sağlamak için zaten temel animasyonları gerçekleştirebiliyoruz. HTML.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.