Вопрос Как правильно сделать анимации в cef?

[hon1n]

При написании анимаций для планшета использовал @keyframes. В браузере всё было хорошо, но в игре анимации либо нет, либо она лагает. Что может служить причиной?

 

[Harland David Sanders]

Какой фреймворк используешь? React? Vue? или обычный HTML + JS. Тебе надо в первую очередь проверять все это на хром-браузере потому что в рейдже используется именно он. Но там тоже есть свои подводные камни, без дополнительной информации подробнее не смогу подсказать.

 

[X-Clusiv]

hon1n написал(а):

При написании анимаций для планшета использовал @keyframes. В браузере всё было хорошо, но в игре анимации либо нет, либо она лагает. Что может служить причиной?

Нажмите для раскрытия...

Причиной лагов в 80% случаев является использование Blur`а. Проверь его наличие в css свойствах, и если есть удали.

 

[Amazingevich]

Тоже в какой-то момент сталкивался с проблемой. Блюр и фильтры отсутствовали.
Очень сильно лагала анимация на scale (увеличивали блок при наведении) и трансформе (пылись двигать картинку влево-вправо), особо ощутимо на 6к мониторах (фулл хд не так заметно было).
Встречалось очень часто в разных интерфейсах (верстали разные люди).
В конце всё-таки переверстали нормально и проблема сама ушла
Использовали vue 2.5

В первую очередь поищи блюры

 

[hon1n]

Блюров нету. Простая анимация с transform: translate и opacity.

 

[hon1n]

Harland David Sanders написал(а):

Какой фреймворк используешь? React? Vue? или обычный HTML + JS. Тебе надо в первую очередь проверять все это на хром-браузере потому что в рейдже используется именно он. Но там тоже есть свои подводные камни, без дополнительной информации подробнее не смогу подсказать.

Нажмите для раскрытия...

Использую Vue.js

 

[Amazingevich]

hon1n написал(а):

Блюров нету. Простая анимация с transform: translate и opacity.

Нажмите для раскрытия...

Приложи сам css, на всякий
Может кто найдет причину в самом коде