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

[Yulik]

Здравствуйте, люди!

Учусь верстать сайты, и в процессе столкнулась с интересным вопросом.

Хочу реализовать анимацию картинки при наведении на нее мыши. Но че-то ищу в инете и найти не могу...

Вот прям как на этом сайте: http://www.karusel-tv.ru/, очень нравится простенькая анимация при наведении на иконки меню.

Кто-нибудь может подсказать, как это делается?

Спасибо заранее!

[Veseloff]

Статичная картинка стоит фоном у элемента. На этот же элемент :hover ставим анимированную. Примерно так

.foo {background: url(static.gif) 0 0 no-repeat;}.foo:hover {background-image: url(animated.gif);}

[Yulik]

Интересная мысль. Спасибо!

Но интереснее стало, когда я посмотрела код.

Как я поняла, там как-то динамично меняется положение картинки. Потому что это не гиф-анимация, а картинка PNG вот такого плана: http://im.karusel-tv.ru/index/announces.png

Вот мне и интересно, как она движется.

Edited June 18, 2014 by Yulik

[Veseloff]

При помощи javascript такое довольно просто организовать. Просто смещать background-position-x раз в сколько-то на определённое расстояние. На том сайте сделано именно так.

[Yulik]

Спасибо, поищу подобную инфу по javascript.

[Galaxy]

можно и css'ом через key frames

[SelenIT]

можно и css'ом

 

Да. Но только в новых браузерах.

[Yulik]

Блин, спасибо большое! Буду разбираться! Стоко вариантов, так здорово!