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

Question

[Anima-ana]

Доброго времени суток. Есть иконка "назад", при наведении происходит заливка справа налево (см. картинку)

Подскажите как лучше реализовать

Comments

[Stalker_RED]

А где код?

[iBird Rose]

Stalker_RED: если он сделал скрин из фотошопа - думаешь он что то уже сверстал?))

[Anima-ana]

Stalker_RED: так я ж спрашиваю, как лучше реализовать. кода еще и в помине нету

[Stalker_RED]

Anima-ana: Вы пишете

при наведении происходит заливка справа налево

, а на самом деле вообще ничего не происходит? Об этом нужно догадываться?

Answer 1

[iBird Rose]

в svg придется рисовать. по другому никак

Comments

[Егор Живагин]

Мне вот интересно стало, а в svg это как сделать? Я так понял, тут даже не справа налево заливка, а от нижнего конца стрелки к верхнему. Я не автор вопроса, но если есть ссылочки какие с примерами, был бы признателен

[iBird Rose]

Егор Живагин: ну тк на свг можешь как хочешь нарисовать. введи в гугле svg animation и увидишь кучу примеров. www.hongkiat.com/blog/svg-animations

[iBird Rose]

Егор Живагин: вот первый попавшийся пример который совсем чуть чуть похож, но показывает как должен сделать автор вопроса codepen.io/suez/pen/ZGWbmE

[Егор Живагин]

iBird Rose: спасибо. Я видел много всяких штук на svg , но видать так и не понял их сути

Answer 2

[Stalker_RED]

\☻/   https://jsfiddle.net/mqk4ygnr/

Но лучше на SVG.

Answer 3

[Александр]

svg || gif

Answer 4

[Антон Антон]

В 2004 году это решалось гифкой с однократной анимацией. при наведении одна, при уходе - другая, подменяют друг друга.

Answer 5

[Дмитрий]

Можно конечно заняться сексом и сделать тело стрелки прозрачным, и z-index а под стрелкой белый фон и при наведении белый фон transition к примеру 0.4s будет менять позицию right. Но это порно, повторюсь))))