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ı iyi desteğe sahiptir.
transform
opacity
will-change
Öğ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);
}
}
Öğeleri döndürmek için rotate
öğesini kullanın. Aşağıdaki örnek, bir öğeyi 360 derece döndürür.
.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
Neden bazı animasyonlar yavaş? bölümünde açıklandığı gibi, öğeleri yeni bir katmana yerleştirmek, tarayıcının düzenin geri kalanını yeniden boyamasına gerek kalmadan bunları yeniden boyamasını sağlar.
Tarayıcılar genellikle yeni bir katmana hangi öğelerin yerleştirilmesi gerektiğine dair iyi kararlar verebilir. 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, will-change
öğesini herhangi bir seçiciye uygulayabilirsiniz:
body > .sidebar {
will-change: transform;
}
Bununla birlikte, özellik bunu yalnızca sürekli değişmek üzere olan öğeler için yapmanız gerektiğini göstermektedir. Örneğin bu, kullanıcının kaydırarak içeri ve dışarı kaydırabileceği bir kenar çubuğu için geçerli olabilir. Sık sık değişmeyen öğeler için, değişiklik
olma olasılığı yüksek olduğunda JavaScript kullanarak will-change
uygulanmasını öneririz. Tarayıcıya gerekli optimizasyonları yapması için yeterli zaman tanıyın ve değişiklik durduğunda özelliği kaldırın.
will-change
özelliğini desteklemeyen bir tarayıcıda katman oluşturmayı zorunlu kılarsanız (büyük olasılıkla Internet Explorer) transform: translateZ(0)
parametresini ayarlayabilirsiniz.
Yavaş veya hatalı animasyonlarda hata ayıklama
Chrome Geliştirici Araçları ve Firefox Geliştirici Araçları, animasyonlarınızın neden yavaş veya hatalı 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 hareket ettiren animasyon büyük olasılıkla yavaş olur. Aşağıdaki örnekte, transform
kullanan bir animasyon top
ve left
kullanan bir animasyonla karşılaştırılmaktadır.
.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ını sağladığı 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.
- Animasyonunuz devam ederken performansı kaydetmeye başlayın.
- Kaydı durdurun ve Şelale sekmesini inceleyin.
Stili Yeniden Hesapla girişlerini görürseniz bu, tarayıcının animasyonu oluşturmak için oluşturma şelalesinin başına dönmesi gerektiği anlamına gelir.
Atlanan kareleri kontrol etme
- Chrome Geliştirici Araçları'nda Oluşturma sekmesini açın.
- FPS meter onay kutusunu etkinleştirin.
- Animasyonunuz çalışırken değerleri izleyin.
FPS ölçer kullanıcı arayüzünün üst kısmındaki Çerçeveler etiketine dikkat edin.
Bu, 50% 1 (938 m) dropped of 1878
gibi değerleri gösterir. Yüksek performanslı bir animasyonun 99%
gibi yüksek bir yüzdesi vardır. Bu, birkaç karenin atlandığı ve animasyonun düzgün göründüğü anlamına gelir.
Bir animasyonun boyamayı tetikleyip tetiklemediğini kontrol etme
Tarayıcının bazı özellikleri boyaması diğerlerinden daha pahalıdır. Örneğin, bulanıklık içeren herhangi bir şeyin (ör. gölge) boyanması, kırmızı bir kutu çizmekten daha uzun sürer. Bu farklılıklar CSS'de her zaman belirgin olmasa da tarayıcı Geliştirici Araçları, boyamayla ilgili diğer performans sorunlarının yanı sıra hangi alanların yeniden boyanması gerektiğini belirlemenize yardımcı olabilir.
Chrome Geliştirici Araçları
- Chrome Geliştirici Araçları'nda 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şmesi gerektiğini düşündüğünüz alanların vurgulandığını görürseniz daha fazla araştırma yapın.
Belirli bir mülkün boyamayla ilgili performans sorunlarına neden olup olmadığını belirlemeniz 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 konuma 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 profil aracını kullanın. Bir şey bulursanız farklı bir CSS mülkünün daha iyi performansla aynı görünümü ve tarzı verip vermediğine bakın.
will-change
özelliğini dikkatli bir şekilde ve yalnızca performans sorunuyla karşılaştığınızda kullanın.