Ка сделать плавное возвращение картинки в начальную позицию, чтобы не было резкого падения?

Question

[Роман Тузов]

И как сделать, чтобы она не лагала при прогрузке страницы?
Вот код: https://jsfiddle.net/zn2u3gyj/1/

Answer 1

[Rustam Bainazarov]

Можно ещё всякой ерудны сделать простой (что-то лучше и.сложнее — это к SVG или, например, Rive), но для полного контроля всё равно понадобится JS:


Даже без каких-то сложных конструкций с SVG удобно работать через CSS для простых анимаций:

Comments

[Роман Тузов]

Класс, работает, спасибо. А как сделать, чтобы загрузка не лагала при прогрузке страницы?

[Rustam Bainazarov]

Hutson, не совсем понимаю.

[Роман Тузов]

Рустам Байназаров, Ну эта картинка стоит как загрузочный экран, когда сайт загрузился, то она пропадает. Но, когда сайт загружается, картинка не плавно двигается, а лагает (прерывисто). Можно как-то это исправить?

[Rustam Bainazarov]

Hutson, не смогу ответить на данный вопрос. Зависит от множества фактором.

[Роман Тузов]

Рустам Байназаров,например?

[Rustam Bainazarov]

Hutson, можете попробовать добавить will-change: transform для .loader.

[Rustam Bainazarov]

Hutson, ну, например, инициализация плагинов, рендеринг, просто сам факт загрузки и т. п.

[Роман Тузов]

Рустам Байназаров, Понятно, спасибо