Переходы 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 должен искать "все" свойства перехода, даже если для элемента есть только одно свойство, это может замедлить работу.

Кто-нибудь знает, если это так? Спасибо!

Ответы

Ответ 1

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

Самый простой пример, о котором я могу думать, это: http://dabblet.com/gist/1657661 - попытаться изменить уровень масштабирования или размер шрифта, и вы увидите, что все становится анимированным. Конечно, такого взаимодействия с пользователем не может быть много, но могут быть некоторые изменения интерфейса, которые могут вызвать перепланирование и перерисовку в некоторых блоках, которые могут заставить браузер попробовать и оживить эти изменения.

Итак, в общем, рекомендуется, чтобы вы не использовали transition: all и вместо этого использовали бы прямые переходы.

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

Ответ 2

Я использовал all для случаев, когда мне нужно было анимировать более одного правила. Например, если я хотел изменить color и background-color на :hover.

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

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