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ğı 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çintranslaterotation 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.

• Önce.
• Sonra.

Chrome Geliştirici Araçları

1. Performans panelini açın.
2. Çalışma zamanı performansını kaydetme otomatik olarak gösterilir.
3. Ö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.

ziyaret edin.

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.

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

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

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.

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ı

1. Ayarlar'ı açın ve Boya ışığı yanıp sönmesini aç/kapat.
2. İ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.