Perf css анимация против перехода

Question

Я хотел бы знать, каких различий в производительности ожидать от анимации css (ключевые кадры) и перехода css.

В моем тестировании кажется, что есть ситуации, когда переход выполняется намного лучше, чем ключевые кадры. В этой статье также предлагается то же самое, но это с 2015 года, поэтому подумал, что он может быть устаревшим https://www.pixelstech.net/article/1434375977-CSS3-animation-vs-CSS3-transition

Глядя на MDN https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance нем говорится: "С точки зрения производительности нет разницы между реализацией анимации с переходами CSS или анимацией. классифицированы в этой статье под тем же зонтиком на основе CSS ".

Поэтому я удивлен, увидев такую ​​разницу в тестировании. Может быть, в firefox они такие же, но, используя Chrome, я определенно вижу разницу.

Я провел несколько тестов на codeandbox, чтобы показать прерывание анимации с ключевыми кадрами и переходами. Вот несколько важных факторов: 1. Я анимирую как transform, так и border-radius. Я знаю, что вам "не следует" анимировать border-radius, но это часть теста. 2. Когда я объединил 2 теста в SPA и переключался между ними, они оба работали хорошо, так что это может быть связано с загрузкой страницы.

Чтобы просмотреть тест во всей его неловкости, выберите "мобильный средний уровень" с помощью инструментов Chrome Dev.

1. Janky css-анимация https://codesandbox.io/s/perf-test-css-animation-nl6xs

2. Плавный переход css https://codesandbox.io/s/perf-test-css-transition-fgd7w

Любая помощь с этим будет оценена. Я уверен, что мы не сможем это исправить, но хотелось бы знать, почему ключевые кадры иногда имеют низкую производительность по сравнению с переходом.

Спасибо!

Answer 1

Кажется, что обе они должны быть довольно эффективными анимациями, поскольку они представляют собой только составные изменения (поскольку они анимируются в масштабе, что эффективно): https://csstriggers.com/transform

Я думаю, проблема может заключаться в том, что ваш тест не является "справедливым" сравнением.

css-анимация (ключевые кадры): эта анимация выполняется сразу в клиентском браузере. Также он выполняет еще немного кода эмоций дляkeyframes.

css transition: эта анимация происходит, когда React завершает свое монтирование (как это делается наuseEffect крючок) и не выполняет keyframes функция.

Таким образом, первый тест css-анимации (ключевых кадров) может быть выполнен React, отбирающим драгоценные ресурсы у анимации браузера, пока она завершает свои события жизненного цикла.

Также дополнительные эмоции keyframes звонок может замедлить его - он заставляет cssпозвоните https://github.com/emotion-js/emotion/blob/6cb8d15438b01b8623af42f304d5ea3032332187/packages/core/src/keyframes.js так эффективно вы звонитеcss дважды с тестом ключевых кадров.

Может быть, лучше провести сравнение в простом HTML + CSS, чтобы React или JS не мешали и не создавали ложного впечатления, что один лучше другого.