Bu kılavuzda, yüksek performanslı CSS animasyonlarının nasıl oluşturulacağı öğretilmektedir.
Bu önerilerin arkasındaki teoriyi öğrenmek için Bazı animasyonlar neden yavaş? bölümüne bakın.
Tarayıcı uyumluluğu
Bu kılavuzun önerdiği tüm CSS özellikleri, tarayıcılar arası düzeyde iyi destek sağlar.
Öğeleri taşıma
Bir öğeyi taşımak için transform özelliğinin translate veya rotation anahtar kelime değerlerini kullanın.
Örneğin, bir öğeyi görünüme kaydırmak için translate işlevini kullanın.
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
360 derece altındaki örnekte öğeler de döndürülebilir.
.animate {
animation: rotate 0.7s ease-in-out both;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Öğeleri yeniden boyutlandırma
Bir öğeyi yeniden boyutlandırmak için transform özelliğinin scale anahtar kelime değerini kullanın.
.animate {
animation: scale 1.5s both;
}
@keyframes scale {
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
Bir öğenin görünürlüğünü değiştirme
Bir öğeyi göstermek veya gizlemek için opacity öğesini kullanın.
.animate {
animation: opacity 2.5s both;
}
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Düzeni veya boyamayı tetikleyen özelliklerden kaçının
Animasyon için herhangi bir CSS mülkü (transform ve opacity dışında) kullanmadan önce, mülkün oluşturma ardışık düzeni üzerindeki etkisini belirleyin.
Kesinlikle gerekli olmadığı sürece düzeni veya boyamayı tetikleyen özellikler kullanmaktan kaçının.
Katman oluşturmayı zorunlu kıl
Bazı animasyonlar neden yavaş? konusunda açıklandığı gibi, öğeler yeni bir katmana yerleştirildiğinde düzenin geri kalanının da yeniden boyanmasına gerek kalmadan yeniden boyanabilir.
Tarayıcılar genellikle yeni bir katmana hangi öğelerin yerleştirilmesi gerektiğine dair iyi kararlar verir, ancak will-change özelliğiyle katman oluşturmayı manuel olarak zorunlu kılabilirsiniz.
Adından da anlaşılacağı gibi bu özellik, tarayıcıya öğenin bir şekilde değiştirileceğini bildirir.
CSS'de bu özellik herhangi bir seçiciye uygulanabilir:
body > .sidebar {
will-change: transform;
}
Ancak bu spesifikasyon, bu yaklaşımın yalnızca sürekli değişmek üzere olan öğeler için uygulanması gerektiğini göstermektedir.
Yukarıdaki örnek bir kenar çubuğuysa kullanıcı kaydırarak içeri ve dışarı doğru kaydırabilirse bu durum söz konusu olabilir.
Sayfanızdaki bazı öğeler sık sık değişmeyebilir. Bu nedenle, değişikliğin gerçekleşme olasılığının yüksek olduğu bir noktaya JavaScript kullanarak will-change uygulanması daha iyi olur.
Tarayıcıya, gerekli optimizasyonları yapması için yeterli zaman tanımanız ve değişiklik durduğunda özelliği kaldırmanız gerekir.
will-change özelliğini desteklemeyen nadir tarayıcılardan birinde (bu noktada büyük olasılıkla Internet Explorer) katman oluşturmayı zorlamak istiyorsanız transform: translateZ(0) parametresini ayarlayabilirsiniz.
Yavaş veya kötü animasyonlarda hata ayıklama
Chrome Geliştirici Araçları ve Firefox Geliştirici Araçları, animasyonlarınızın neden yavaş veya kötü olduğunu anlamanıza yardımcı olacak birçok araca sahiptir.
Bir animasyonun düzeni tetikleyip tetiklemediğini kontrol etme
Bir öğeyi transform dışında bir şey kullanarak taşıyan animasyon muhtemelen yavaş olacaktır.
Aşağıdaki örnekte top ve left animasyonlarını kullanarak ve transform kullanarak aynı görsel sonucu elde ettim.
.box {
position: absolute;
top: 10px;
left: 10px;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
top: calc(90vh - 160px);
left: calc(90vw - 200px);
}
}
.box {
position: absolute;
top: 10px;
left: 10px;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
transform: translate(calc(90vw - 200px), calc(90vh - 160px));
}
}
Bunu aşağıdaki iki Glitch örneğinde test edebilir ve Geliştirici Araçları'nı kullanarak performansı keşfedebilirsiniz.
Chrome Geliştirici Araçları
- Performans panelini açın.
- Animasyonunuz devam ederken çalışma zamanı performansını kaydedin.
- Özet sekmesini inceleyin.
Özet sekmesinde Oluşturma için sıfır dışında bir değer görürseniz bu, animasyonunuzun tarayıcının düzen çalışması yapmasına neden olduğu anlamına gelebilir.
Firefox Geliştirici Araçları
Firefox Geliştirici Araçları'nda Waterfall, tarayıcının nerede zaman geçirdiğini anlamanıza yardımcı olabilir.
- Performans panelini açın.
- Panelde, animasyonunuz devam ederken performansı kaydetmeye başlayın.
- Kaydı durdurun ve Şelale sekmesini inceleyin.
Stili Yeniden Hesapla girişleri görürseniz tarayıcının, oluşturma şelalesinin başında başlaması gerekiyordur.
Bir animasyonun kare kaybedip kaybetmediğini kontrol etme
- Chrome Geliştirici Araçları'nın Oluşturma sekmesini açın.
- FPS meter onay kutusunu etkinleştirin.
- Animasyonunuz çalışırken değerleri izleyin.
FPS meter kullanıcı arayüzünün üst kısmında Çerçeveler etiketini görürsünüz. Bunun altında, 50% 1 (938 m) dropped of 1878 çizgileri boyunca bir değer görürsünüz.
Yüksek performanslı bir animasyonun yüzdesi yüksek olur (ör. 99%). Yüksek bir yüzde, birkaç karenin atlandığı ve animasyonun düzgün görüneceği anlamına gelir.
Bir animasyonun boyamayı tetikleyip tetiklemediğini kontrol etme
Konu boyama olduğunda bazı şeyler diğerlerinden daha pahalıdır.
Örneğin, bulanıklık içeren herhangi bir şeyin (ör. gölge) boyaması, kırmızı bir kutu çizmekten daha uzun sürer.
Ancak CSS söz konusu olduğunda bu her zaman net olarak anlaşılmaz:
background: red; ve box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);
her zaman çok farklı performans özelliklerine sahip gibi görünmese de yapar.
Tarayıcı Geliştirici Araçları, hangi alanların yeniden boyanması gerektiğini ve boyamayla ilgili performans sorunlarını belirlemenize yardımcı olabilir.
Chrome Geliştirici Araçları
- Chrome Geliştirici Araçları'nın Oluşturma sekmesini açın.
- Yanıp sönen boya'yı seçin.
- İşaretçiyi ekranda hareket ettirin.
Ekranın tamamının yanıp söndüğünü veya değişmemesini düşündüğünüz alanların vurgulandığını görüyorsanız araştırma yapabilirsiniz.
Belirli bir mülkün boyama nedeniyle performans sorunlarına neden olup olmadığını incelemeniz gerekirse Chrome Geliştirici Araçları'ndaki boya profil aracı size yardımcı olabilir.
Firefox Geliştirici Araçları
- Ayarlar'ı açın ve Boyanın yanıp sönmesini aç/kapat için bir Araç Kutusu düğmesi ekleyin.
- İncelemek istediğiniz sayfada düğmeyi açık konumuna getirin ve vurgulanan alanları görmek için farenizi hareket ettirin veya kaydırın.
Sonuç
Animasyonları, oluşturma yolunun birleştirme aşamasında tutmak için mümkün olduğunda opacity ve transform ile kısıtlayın.
Yolun hangi aşamasının animasyonlarınızdan etkilendiğini kontrol etmek için Geliştirici Araçları'nı kullanın.
Herhangi bir boya işleminin özellikle pahalı olup olmadığını görmek için boya profili aracını kullanın. Bir şey bulursanız farklı bir CSS mülkünün daha iyi performansla aynı görünüm ve izlenimi sağlayıp sağlamayacağına bakın.
will-change özelliğini dikkatli bir şekilde ve yalnızca bir performans sorunuyla karşılaştığınızda kullanın.