Переходы CSS3: «Переход: все» медленнее, чем «Переход: x»?

У меня вопрос о скорости рендеринга свойства перехода 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-colorна :hover.

Но оказывается, что вы можете настроить более одного правила для переходов, поэтому вам никогда не придется прибегать к allнастройке.

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