Bu yayında, CodePen'de bulunan bazı popüler animasyonların nasıl oluşturulduğunu öğrenebilirsiniz. Bu animasyonların tümünde, bu bölümdeki diğer makalelerde ele alınan yüksek performanslı teknikler kullanılır.
Bu önerilerin arkasındaki teoriyi öğrenmek için Bazı animasyonlar neden yavaş? başlıklı makaleyi, pratik ipuçları için ise Animasyon Kılavuzu'nu inceleyin.
Sihirbaz yükleme animasyonu
CodePen'de sihirbaz yükleme animasyonunu görüntüleme
Bu yükleme animasyonu tamamen CSS ile oluşturulmuştur. Resim ve animasyonun tamamı CSS ve HTML ile oluşturulmuştur. Resim veya JavaScript kullanılmamıştır. Nasıl oluşturulduğunu ve ne kadar iyi performans gösterdiğini anlamak için Chrome Geliştirici Araçları'nı kullanabilirsiniz.
Chrome Geliştirici Araçları ile animasyonu inceleme
Animasyon çalışırken Chrome Geliştirici Araçları'nda Performans sekmesini açın ve animasyonun birkaç saniyesini kaydedin. Özet bölümünde, bu animasyon çalıştırılırken tarayıcının herhangi bir düzen veya boyama işlemi yapmadığını görmeniz gerekir.