Анимация картинки в прелоадере?

Question

[enchikiben]

Добрый вечер! Помогите сделать прелоадер, суть такая ракета вылетает снизу долетает до середины и как бы летит и трясется и по истечению времени улетает вверх.
Я так понимаю сделать это можно с помощью JS и добавлением различных классов в определенные моменты. Я не могу разобраться с тряской :), как заставить объект дергаться в разные стороны? При этом дергание надо включать когда ракета в центре блока, а когда она летит то не надо.

Спасибо.

Answer 1

[DTX]

Что-то типо такого.
codepen.io/anon/pen/qqdOjQ
(Первая ссылка гугла + infinite)

Вторая ссылка гугла:
https://elrumordelaluz.github.io/csshake/

Интересная штука)

Answer 2

[Anton fon Faust]

Три стиля:
1 - анимация до центра страницы
2 - анимация - в центре (тряска + infinite)
3 - анимация полета вверх
Смена стилей с помощью javascript по мере загрузки данных, или назначение второго стиля по событию animationend (ищите полифилл для кроссбраузерности) первого стиля и третьего по событию загрузки.