CSS3 Geçişleri: "Geçiş: tümü", "geçiş: x" ten daha mı yavaş?

Css3 geçiş özelliği için işleme hızı hakkında bir sorum var.

Bir dizi öğem olduğunu varsayalım:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

Tek bir bildirim kullanarak tüm bu öğeler için tüm geçişleri hedeflemek çok daha etkilidir div, span, a {transition: all}. Ama sorum şu: her bir öğenin özel geçiş özelliğini hedeflemek, animasyon oluşturmanın pürüzsüzlüğü ve çabukluğu açısından "daha hızlı" mı olur? Örneğin:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

Bunu sormadaki mantığım, eğer css "motoru", bir eleman için tek bir özellik olsa bile "tüm" geçiş özelliklerini aramak zorunda kalırsa, işleri yavaşlatabilir.

Durumun bu olup olmadığını bilen var mı? Teşekkürler!

Evet, kullanmak transition: allperformansta büyük dezavantajlara neden olabilir. Renk değişiklikleri, boyut değişiklikleri gibi, kullanıcı görmese bile, tarayıcının bir geçiş yapması gerektiğinde bakacağı birçok durum olabilir.

Aklıma gelen en basit örnek şudur: http://dabblet.com/gist/1657661 - yakınlaştırma düzeyini veya yazı tipinin boyutunu değiştirmeyi deneyin ve her şeyin canlandırıldığını göreceksiniz. Bu tür pek çok kullanıcı etkileşimi, ancak bazı bloklarda yeniden akışa ve yeniden boyamaya neden olabilecek ve tarayıcıya bu değişiklikleri denemesini ve canlandırmasını söyleyebilecek bazı arayüz değişiklikleri olabilir.

Bu nedenle, genel olarak, transition: allve bunun yerine doğrudan geçişleri kullanmamanız önerilir.

allGeçişlerde yanlış gidebilecek başka şeyler de var , örneğin ilk başta bloklar için başlangıç ​​stillerini oluşturacak ve ardından stili bir animasyonla uygulayacak olan sayfa yüklemesinde animasyon sıçraması gibi. Çoğu durumda, istediğiniz şey bu olmaz :)

allBirden fazla kuralı canlandırmam gereken durumlar için kullanıyorum . Örneğin, ben isteseydi değiştirmeye color& background-colorüzerinde :hover.

Ancak, geçişler için birden fazla kuralı hedefleyebileceğiniz ortaya çıktı, bu nedenle hiçbir zaman ortama başvurmanıza gerek kalmazall .

.nav a {
  transition: color .2s, text-shadow .2s;
}