Как реализован этот эффект сжимающейся и выпрыгивающей картинки?

Question

[kode_krendel]

Забавный эффект - https://htmlburger.com/
При наведении курсора на бургеры.
Не вижу в коде как это реализовано? hover ничего не дает.

Answer 1

[justdealman]

https://jsfiddle.net/ydfwdr81/

Comments

[kode_krendel]

На этом сайте тоже через JS реализована анимация?

[justdealman]

Да. Лучше, конечно, чтобы анимация происходила средствами css (из соображений производительности). Но без js здесь не обойтись — для css имеем только событие hover, если увести мышь с элемента — это отмена события hover, а не новое событие, к сожалению. Поэтому вариант такой — средствами js рассчитывать размеры и присваивать их элементу (через .css, а не .animate), а анимацией будет заниматься css за счет transition. В таком случае, во первых, есть два события, во-вторых, так как анимацию можно проводить в несколько этапов, для каждого из них можно навешивать на объект определенный класс с собственными значениями transition, управляя не только продолжительностью, но и плавностью анимации.

[kode_krendel]

justdealman: спасибо за развернутый ответ.

Answer 2

[Сергей Соколов]

CSS3 анимации? Посмотрите в их CSS поиском по слову "anim".

Fiddle с бургером без JS/jQuery. Больше примеров см. Hover.css.

Хотя, у них вроде бы, сделано через jQuery animate()

Comments

[kode_krendel]

Спасибо за решение без jQ.