Bu kılavuzda, yüksek performanslı CSS animasyonlarının nasıl oluşturulacağı açıklanmaktadır.
Ayrıntılı bilgi edinmek için Bazı animasyonlar neden yavaş? teorisinin temelinde yatan teoridir.
Tarayıcı uyumluluğu
Bu kılavuzun önerdiği tüm CSS özelliklerinin farklı tarayıcılarda sorunsuz çalışabilmesi destek.
transform
opacity
will-change
Öğeleri taşıma
Bir öğeyi taşımak içintranslate
rotation
transform
mülkü.
Ö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
hareketini kullanın. Aşağıdaki örnekte bir öğeyi döndürme
360 derece.
.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 şu öğenin scale
anahtar kelime değerini kullanın:
transform
mülkü.
.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
simgesini 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 özelliğini (transform
ve opacity
dışında) kullanmadan önce,
Mülkün oluşturma ardışık düzeni üzerindeki etkisini belirler.
Mutlaka gerekli olmadığı sürece düzeni veya boyayı tetikleyen özelliklerden kaçının.
Katman oluşturmaya zorla
Bazı animasyonlar neden yavaş? konusunda açıklandığı gibi, öğeleri yeni bir katmana yerleştirmek, tarayıcının tekrar boyayabiliriz.
Tarayıcılar, bir web sitesine hangi öğelerin yerleştirilmesi gerektiği konusunda
ancak katman oluşturmaya zorlamak için
will-change
mülkündeki her mülk.
Adından anlaşılacağı gibi bu özellik, tarayıcıya bu öğenin gittiğinde bir yere
bir şekilde değişmesini
bekliyordur.
CSS'de herhangi bir seçiciye will-change
uygulayabilirsiniz:
body > .sidebar {
will-change: transform;
}
Ancak spesifikasyon
bunu yalnızca her zaman alakalı öğeler için yapmanız
unutmayın. Örneğin bu, kullanıcının içine sindirebileceği bir kenar çubuğu
çıkar. Sıkça değişmeyen öğeler için,
will-change
. Şunları yaptığınızdan emin olun:
gerekli optimizasyonları yapması için tarayıcıya yeterli zamanı tanımalı ve
değişiklik durduğunda mülkü görürsünüz.
will-change
eklentisini desteklemeyen bir tarayıcıda katman oluşturmayı zorunlu kılarsanız
(büyük olasılıkla Internet Explorer), transform: translateZ(0)
olarak ayarlayabilirsiniz.
Yavaş veya arızalı animasyonlarda hata ayıkla
Chrome Geliştirici Araçları ve Firefox Geliştirici Araçları, hangi aracı kullanacağınızı öğrenmek için neden yavaş veya bozuk olduğunu sorun.
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, transform
kullanan bir animasyon
biçimi top
ve left
kullanarak bir animasyona dönüştürülebilir.
.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 edebilirsiniz: Geliştirici Araçları'nı kullanarak performansı keşfedin.
Chrome Geliştirici Araçları
- Performans panelini açın.
- Çalışma zamanı performansını kaydetme otomatik olarak gösterilir.
- Özet sekmesini inceleyin.
Özet sekmesinde Oluşturma için sıfır dışında bir değer görüyorsanız bu değer bu, animasyonunuzun tarayıcının düzeni çalıştırmasını sağladığı anlamına gelir.
'nı inceleyin.Firefox Geliştirici Araçları
Firefox Geliştirici Araçları'nda Şelale tarayıcının nerede vakit geçirdiğini anlamanıza yardımcı olur.
- Performans panelini açın.
- Animasyonunuz gerçekleşirken performansı kaydetmeye başlayın.
- Kaydı durdurun ve Şelale sekmesini inceleyin.
Stili Yeniden Hesapla girişleri görürseniz bu, tarayıcının oluşturma şelalesi kullanabilirsiniz.
Atlanan kare olup olmadığını kontrol edin
- Chrome Geliştirici Araçları'nda Oluşturma sekmesini açın.
- FPS ölçer onay kutusunu etkinleştirin.
- Animasyonunuz çalışırken değerleri izleyin.
FPS ölçer kullanıcı arayüzünün üst kısmındaki Kareler etiketine dikkat edin.
50% 1 (938 m) dropped of 1878
gibi değerler gösterilir. Yüksek performans
animasyonun 99%
gibi yüksek bir yüzdesi var. Bu, az sayıda karenin
ve animasyon düzgün görünüyor.
Bir animasyonun boyamayı tetikleyip tetiklemediğini kontrol etme
Bazı mülklerin boyanması tarayıcının diğerlerine göre daha pahalıdır. Örneğin, Bulanıklaştırma (ör. gölge gibi) içeren her şey, daha uzun daha basit bir resimdir. Bu farklılıklar her zaman yardımcı olabilir, ancak tarayıcı Geliştirici Araçları, uygulamanızın ve boyayla ilgili diğer performans sorunlarını gidermeye çalışır.
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.
Tüm ekranın yanıp söndüğünü görüyorsanız veya farklı olduğunu düşündüğünüz alanlar varsa değiştirmesi gerektiğini düşünüyorsanız daha fazla araştırın.
Belirli bir mülkün performans sorunları varsa, boya profil aracı yardımcı olabilir.
Firefox Geliştirici Araçları
- Ayarlar'ı açın ve Boya ışığı yanıp sönmesini aç/kapat.
- İncelemek istediğiniz sayfada düğmeyi açık konuma getirin ve farenizi hareket ettirin ya da vurgulanan alanları görmek için kaydırın.
Sonuç
Mümkün olduğunda, animasyonları opacity
ve transform
ile kısıtlayarak
animasyonların oluşturulması için kullanılır. Geliştirici Araçları'nı kullanarak
Yolun hangi aşamasının animasyonlarınızdan etkilendiğini görebilirsiniz.
Boya profilerini kullanarak boyama işlemlerinin özellikle yapılıp yapılmadığını Pahalı. Bir şey bulursanız farklı bir CSS mülkünün aynı görünümü ve tarzı daha iyi performansla gösterebilir.
will-change
özelliğini dikkatli bir şekilde ve yalnızca performans sorunuyla karşılaştığınızda kullanın.