Как сделать плавную анимацию элементов при наведении как на примере?

Question

[Gera11]

На сайте аэропорта svx aero при наведении на кнопки "вылет и прилет" начинает плавно срабатывать анимация самолета, как сделать так же?

Comments

[Шохрух Шаймардонов]

При наведении или нажатии? При наведении ничего нет. А вот при нажатии, переходит на другую страницу и при ее загрузке анимация самолета. Это "loading", чтобы не было белого экрана пока пользователь ждет загрузки страницы.
Работает так: пока страница полностью не загружена отображается "гифка"/анимация, после уже сам контент.

Чисто анимацию можете на css сделать. Найдите иконку самолета и с помощью @keyframes задайте нужные стили

[Gera11]

Шохрух Шаймардонов, при наведении есть анимация самолета по середине. Он то взлетает то сажается.

[Тарас Шульга]

Gera11, открываем консоль и видим, там просто добавляться класс в котором есть анимация - вот и все.

[Шохрух Шаймардонов]

Gera11 Откройте браузер и перейдите в DevTools. Там увидите, что при наведении на ссылки, меняется состояние блока (точнее добавляются классы plane-out / plane-in соответственно). Далее смотрите какие свойства эти классы меняют. Сделайте свой вариант по аналогии

[Тарас Шульга]

Шохрух Шаймардонов, вы не ошиблись получателем?)

[Шохрух Шаймардонов]

Тарас Шульга, прошу прощения) да ошибся. Исправил

Answer 1

[Kirill Makarov]

С мобильной версии не смог увидеть наведение. Но вообще как вариант думаю можно через :hover попробовать, допустим при наведении чтобы менялся display и появлялась анимация. Либо же через js