Yüksek performanslı CSS animasyonları oluşturma

Kayce Basques

Rachel Andrew

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.

• Önce.
• Sonra.

Chrome Geliştirici Araçları

1. Performans panelini açın.
2. Animasyonunuz devam ederken çalışma zamanı performansını kaydedin.
3. Ö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.

1. Performans panelini açın.
2. Animasyonunuz devam ederken performansı kaydetmeye başlayın.
3. 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

1. Chrome Geliştirici Araçları'nda Oluşturma sekmesini açın.
2. FPS meter onay kutusunu etkinleştirin.
3. 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ı

1. Chrome Geliştirici Araçları'nda Oluşturma sekmesini açın.
2. Yanıp sönen boya'yı seçin.
3. İş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ı

1. Ayarlar'ı açın ve Boyanın yanıp sönmesini aç/kapat için bir Araç Kutusu düğmesi ekleyin.
2. İ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.