Переходи CSS3: Чи перехід "все" повільніший за "перехід: х"?

У мене питання про швидкість візуалізації властивості переходу css3.

Припустимо, у мене є ряд елементів:

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}

Набагато ефективніше націлити всі переходи для всіх цих елементів за допомогою однієї декларації div, span, a {transition: all}. Але моє запитання: чи було б це "швидше" з точки зору плавності та швидкості візуалізації анімації для націлювання на властивість кожного елемента переходу? Наприклад:

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}

Моя логіка, коли я запитую це, полягає в тому, що якщо "движок" css повинен шукати властивості переходу "всі", навіть якщо для елемента є лише одна властивість, це може сповільнити роботу.

Хтось знає, чи це так? Дякую!

Так, використання transition: allможе призвести до значних недоліків у роботі. Може бути багато випадків, коли браузер буде виглядати, якщо йому потрібно здійснити перехід, навіть якщо користувач цього не побачить, наприклад, зміни кольору, зміни розмірів тощо.

Найпростіший приклад, який я можу придумати, такий: http://dabblet.com/gist/1657661 - спробуйте змінити рівень масштабування або розмір шрифту, і ви побачите, що все стає анімованим. Звичайно, не могло бути багато таких взаємодій з користувачами, але можуть бути деякі зміни інтерфейсу, які можуть спричинити перепланування та перемальовування в деяких блоках, що може сказати браузеру спробувати анімувати ці зміни.

Отже, загалом, рекомендується не використовувати transition: allта використовувати прямі переходи.

Є деякі інші речі, які можуть піти не так із allпереходами, як сплеск анімації при завантаженні сторінки, де спочатку він відображав початкові стилі для блоків, а потім застосовував стиль з анімацією. У багатьох випадках це не те, що ти хочеш :)

Я використовував allдля випадків, коли мені потрібно було анімувати більше одного правила. Наприклад, якщо я хотів змінити color& background-coloron :hover.

Але виявляється, що ви можете націлити кілька правил для переходів, тому вам ніколи не потрібно вдаватися до allналаштування.

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