Yüksek performanslı CSS animasyonları oluşturma

Kayce Basques

Rachel Andrew

Bu kılavuzda, yüksek performanslı CSS animasyonları oluşturmayı öğreneceksiniz.

Bu önerilerin teorisini öğrenmek için Bazı animasyonlar neden yavaş? başlıklı makaleyi inceleyin.

Tarayıcı uyumluluğu

Bu kılavuzda önerilen tüm CSS özelliklerinin tarayıcılar arası desteği iyidir.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

Öğe 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ümde kaydırmak için translate tuşunu 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 simgesini kullanın. Aşağıdaki örnekte bir öğe 360 derece döndürülüyor.

.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 scale özelliğinin scale anahtar kelime değerini kullanın.transform

.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;
  }
}

Not: Çeşitli animasyonların kopyalama ve yapıştırma örneklerini Animista'da bulabilirsiniz.

Düzen veya boyama işlemlerini tetikleyen özelliklerden kaçının

Animasyon için transform ve opacity dışındaki herhangi bir CSS özelliğini kullanmadan önce, özelliğin oluşturma işlem hattı üzerindeki etkisini belirleyin. Kesinlikle gerekli olmadığı sürece düzeni veya boyamayı tetikleyen özelliklerden kaçının.

Uyarı: Düzeni veya boyamayı tetikleyen bir özellik kullanmanız gerekiyorsa animasyonu muhtemelen sorunsuz veya yüksek performanslı tutamazsınız.

Katman oluşturmayı zorunlu kılma

Bazı animasyonlar neden yavaş? başlıklı makalede açıklandığı gibi, öğeleri yeni bir katmana yerleştirmek, tarayıcının düzenin geri kalanını yeniden boyamasına gerek kalmadan bu öğeleri yeniden boyamasına olanak tanır.

Tarayıcılar genellikle hangi öğelerin yeni bir katmana yerleştirilmesi gerektiği konusunda iyi kararlar verebilir ancak will-change özelliğiyle katman oluşturmayı manuel olarak zorlayabilirsiniz. Adından da anlaşılacağı gibi bu özellik, tarayıcıya bu öğenin bir şekilde değiştirileceğini bildirir.

Dikkat: Katman oluşturma işlemi başka performans sorunlarına neden olabileceğinden, optimizasyon sürecinizin başlarında bu özelliği kullanmanızı önermiyoruz. Bunun yerine, yalnızca grafik sorunları fark ederseniz ve bir öğeyi yeni bir katmana taşımanın yardımcı olabileceğini düşünürseniz kullanın.

CSS'de will-change özelliğini herhangi bir seçiciye uygulayabilirsiniz:

body > .sidebar {
  will-change: transform;
}

Ancak spesifikasyon, bunu yalnızca her zaman değişmek üzere olan öğelere eklemeniz gerektiğini belirtir. Örneğin, bu özellik, kullanıcının kaydırarak açıp kapatabileceği bir kenar çubuğu için kullanılabilir. Öğe sık sık değişmiyorsa değişiklik yapılması muhtemel olduğunda JavaScript kullanarak will-change uygulayın. Tarayıcıya gerekli optimizasyonları yapması için yeterli süre tanıdığınızdan emin olun ve değişiklik durduğunda özelliği kaldırın.

will-change desteği olmayan bir tarayıcıda katman oluşturmayı zorlamak için transform: translateZ(0) değerini ayarlayabilirsiniz.

Yavaş veya hatalı animasyonları 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ı olabilir.

Animasyonun düzeni tetikleyip tetiklemediğini kontrol etme

Bir öğeyi transform dışında bir şey kullanarak hareket ettiren animasyonların yavaş olması muhtemeldir. Aşağıdaki örnekte, transform kullanılarak oluşturulan bir animasyon ile top ve left kullanılarak oluşturulan bir animasyon karşılaştırılmaktadır.

Yapılmaması gerekenler:

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

Yapılması gerekenler

.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 örnekte test edebilir ve Geliştirici Araçları'nı kullanarak performansı inceleyebilirsiniz.

• Öncesinde, top ve left animasyonuyla.
• Sonra, transform ile.

Chrome Geliştirici Araçları

1. Performans panelini açın.
2. Animasyonunuz oynatılırken çalışma zamanı performansını kaydedin.
3. Özet sekmesini inceleyin.

Özet sekmesindeki Oluşturma için sıfır olmayan bir değer görüyorsanız animasyonunuzun tarayıcının düzen çalışması yapmasına neden olduğu anlamına gelebilir.

animation-with-top-left örneği, oluşturma çalışmasına neden olur.

animation-with-transform örneği oluşturma çalışmasına neden olmaz.

Firefox Geliştirici Araçları

Firefox Geliştirici Araçları'ndaki Şelale, tarayıcının zamanı nerede harcadığını anlamanıza yardımcı olabilir.

1. Performans panelini açın.
2. Animasyonunuz devam ederken performans kaydını başlatın.
3. Kaydı durdurun ve Şelale sekmesini inceleyin.

Stili Yeniden Hesapla girişlerini görüyorsanız tarayıcının animasyonu oluşturmak için oluşturma şelalesinin başına dönmesi gerekir.

Kayıp kareleri kontrol etme

1. Chrome Geliştirici Araçları'nda Oluşturma sekmesini açın.
2. FPS ölçer onay kutusunu işaretleyin.
3. Animasyonunuz çalışırken değerleri izleyin.

FPS ölçer kullanıcı arayüzünün üst kısmındaki Kareler etiketine dikkat edin. Bu, 50% 1 (938 m) dropped of 1878 gibi değerleri gösterir. Yüksek performanslı bir animasyonun yüzdesi yüksektir (ör. 99%). Bu, birkaç karenin atlandığı ve animasyonun sorunsuz göründüğü anlamına gelir.

animation-with-top-left örneği, karelerin% 50'sinin bırakılmasına neden olur.

animation-with-transform örneği, karelerin yalnızca% 1'inin bırakılmasına neden olur.

Animasyonun boyama işlemini tetikleyip tetiklemediğini kontrol etme

Bazı özelliklerin tarayıcı tarafından oluşturulması diğerlerine göre daha maliyetlidir. Örneğin, bulanıklık içeren her şey (ör. gölge) kırmızı bir kutu çizmekten daha uzun sürer. Bu farklılıklar CSS'de her zaman belirgin değildir ancak tarayıcı geliştirici araçları, hangi alanların yeniden çizilmesi gerektiğini ve boyama ile ilgili diğer performans sorunlarını belirlemenize yardımcı olabilir.

Chrome Geliştirici Araçları

1. Chrome Geliştirici Araçları'nda Oluşturma sekmesini açın.
2. Paint Flashing'i seçin.
3. İşaretçiyi ekranın etrafında hareket ettirin.

Google Haritalar'daki bu örnekte, yeniden boyanan öğeleri görebilirsiniz.

Ekranın tamamının yanıp söndüğünü veya değişmemesi gerektiğini düşündüğünüz alanların vurgulandığını görürseniz durumu daha ayrıntılı bir şekilde inceleyin.

Belirli bir özelliğin boyama ile ilgili performans sorunlarına neden olup olmadığını belirlemeniz gerekiyorsa Chrome Geliştirici Araçları'ndaki boyama profil oluşturucu yardımcı olabilir.

Firefox Geliştirici Araçları

1. Ayarlar'ı açın ve Boyanın yanıp sönmesini açma/kapatma için bir Araç Kutusu düğmesi ekleyin.
2. İncelemek istediğiniz sayfada düğmeyi açın ve farenizi hareket ettirin veya kaydırarak vurgulanan alanları görün.

Birleştirme aşamasında animasyon oluşturma

Mümkün olduğunda, animasyonları opacity ve transform ile sınırlayarak animasyonları oluşturma yolunun birleştirme aşamasında tutun. Yolun hangi aşamasının animasyonlarınızdan etkilendiğini kontrol etmek için Geliştirici Araçları'nı kullanın.

Herhangi bir boyama işleminin özellikle maliyetli olup olmadığını görmek için boyama profil oluşturucuyu kullanın. Bir şey bulursanız farklı bir CSS özelliğinin daha iyi performansla aynı görünümü verip vermediğini kontrol edin.

will-change özelliğini yalnızca performans sorunuyla karşılaşırsanız ve dikkatli bir şekilde kullanın.