Производительность CSS Transition vs CSS Animation

У меня очень простая ситуация: затухание элементов ввода/вывода на странице (простые div и т.д.). Я знаю, что это может быть выполнено с непрозрачностью с помощью CSS-переходов или анимаций CSS.

Есть ли разница в производительности между этими двумя? Я всегда использовал переходы CSS (в основном потому, что им требуется меньше строк CSS и т.д.), Но мне интересно, не использует ли использование CSS-анимации какую-либо пользу.

Ответ 1

Нет, производительность должна быть примерно одинаковой.

opacity изменения обрабатываются графическим процессором, поэтому в большинстве современных браузеров вы получите реальный плавный эффект.

Ответ 2

В некоторых случаях анимация CSS3 медленнее, чем переход CSS3, поскольку некоторые работы по рисованию не снимаются с графическим процессором при использовании анимации CSS3.

Здесь вы можете найти подробное сравнение анимация CSS3 против перехода CSS3.