Animasyonlar, bir kullanıcının bir web sitesine olan ilgisini sürdürmede önemli bir unsurdur. Dikkatlice uygulandığında, animasyonlar bir web sayfasının kullanılabilirliğini geliştirir ve kullanıcı eylemleri hakkında faydalı görsel geri bildirim sağlar.
Bu modül, CSS animasyonlarını kullanarak web sayfalarının nasıl geliştirileceğini açıklar. Mülk değerlerine geçişleri nasıl uygulayacağınızı öğreneceksiniz. Geçişler, özellik değişikliklerinin zamanlamasını belirlemenizi sağlar. Örneğin, fare imleci üzerine geldiğinde bir öğenin genişliğini ve yüksekliğini beş saniyelik bir süre içinde değiştirmesini belirtebilirsiniz. Ardından, 2D ve 3D dönüşümleri elemanlara nasıl uygulayacağınızı öğreneceksiniz. Dönüşümler, öğeleri ölçeklemenize, çevirmenize, döndürmenize ve eğriltmenize olanak tanır. Ayrıca, dönüşümün belirli bir animasyon süresi boyunca kademeli olarak uygulanması için dönüşümlere geçişler de uygulayabilirsiniz.
Bu modülün sonunda, anahtar kare animasyonlarını öğelere nasıl uygulayacağınızı öğreneceksiniz. Ana kare animasyonları, bir animasyon sırasında belirli anlarda bir dizi özellik değeri tanımlamanıza olanak tanır. Örneğin, bir öğenin rengini ve konumunu animasyon süresinin yüzde 0, yüzde 33, yüzde 66 ve yüzde 100’lerinde belirtebilirsiniz.
Konu
- CSS Geçişleri Uygulama
- Öğeleri Dönüştürme
- CSS Anahtar Kare Animasyonlarını Uygulama
Lab: Kullanıcı Arayüzünü Canlandırma
- CSS Geçişleri Uygulama
- Anahtar Kare Animasyonlarını Uygulama
Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:
- Özellik değerlerine HTML öğelerine animasyon uygulamak için geçişler uygulayın.
- HTML öğelerine 2D ve 3D dönüştürmeleri uygulayın.
- HTML öğelerine ana kare animasyonlarını uygulayın.