Анимация картинки при наведении и вообще...

GIF

Наверное самый старый и надёжный способ. 

На мой взгляд, наиболее подходящий вариант для анимированной gif картинки - это при наведении менять фон (background) со статичного на анимированный через CSS. 
Правда этот вариант хорош когда GIF-ка, как-бы не имеет "начала и конца", например просто мерцает или дрожит и зациклена... 

Был такой пример, статичная картинка - человек в кадре, при наведении на блок, он выбегает из кадра. Т.е. при наведении GIF-ка должна начаться строго сначала и не повторяться, плюс это должно случиться при наведении именно на блок, в котором был ещё и текст...

Реализовалось при помощи событий onmouseout и onmouseover, так: 

<div onmouseout="querySelector('img').src='image.gif'" onmouseover="querySelector('img').src='hover.gif'">
    <a href="#">
        <img src="/image.gif" alt="" />
    </a>
</div>

Раньше пользовался этим событием только для наведения на саму картинку, где менялся путь до нее, тут же при наведении на блок меняется селектор img, спасибо форуму javascript.ru

Так же нужно помнить, что в случае, если картинка большая, при наведении возникнет пауза пока она (картинка) прогрузится, я делал так: добавлял к элементу background с этим изображением и сдвигал его из зоны видимости, может не очень изящно, зато без доп. скриптов.

С помощью CSS анимации

Вот этот вариант мне нравится больше всего!

В данном случае создается спрайт background с ключевыми кадрами, которые можно проиграть с помощью css3 анимации (@keyframes) — состояний объекта в определенный момент времени.

Выглядит это примерно так:

.test {
    background: url(http://im.karusel-tv.ru/index/announces.png) 0 0 no-repeat;
    width: 160px;
    height: 146px;
    cursor: pointer;
}

.test:hover {
    -webkit-animation: move  .8s steps(8) infinite;
    animation: move  .8s steps(8) infinite;
}

@-webkit-keyframes move {
  from { background-position: 0 0; }
  to   { background-position: -1280px 0; }
}
@keyframes move {
  from { background-position: 0 0; }
  to   { background-position: -1280px 0; }
}

 Пример: http://jsfiddle.net/gL5MX/ 

 Плюсы и минусы пока оставлю.

С помощью скрипта.

Смысл основан на тех же спрайтах, не пробовал, не искал пока. 

Вот тут - сайт детского канала "Карусель" анимация останавливается/проигрывается в том месте, когда убирается указатель, что интересно! )

Скрипт там вот такой:

/*! karusel-tv 2016-03-24 */
jQuery(function($){function startAnim($this){var id=$this.attr("id");if("undefined"==typeof id&&(id=Math.random().toString(36).substring(7)+"_"+Math.round((new Date).getTime()/1e3),$this.attr("id",id)),"undefined"==typeof anim[id]){var conf=$this.data("anim"),bg="",shiftX=0,shiftY=0,step=conf.step,delay=conf.delay;"undefined"==typeof conf.background?(bg=$this.css("background-image"),bg=bg.replace("url(","").replace(")","").replace('"',"").replace('"',"")):(bg=conf.background,$this.css("background-image","url("+bg+")")),"undefined"==typeof conf.position&&(conf.position=$this.css("background-position"));var pxPos=conf.position.indexOf("px"),spacePos=conf.position.indexOf(" ");pxPos>0&&spacePos>pxPos&&(shiftX=conf.position.slice(0,pxPos)),pxPos=conf.position.lastIndexOf("px"),pxPos>0&&spacePos>0&&pxPos>spacePos&&(shiftY=conf.position.slice(spacePos+1,pxPos));var img=new Image;img.src=bg,img.onload=function(){var frames=Math.floor((this.width-shiftX)/step);anim[id]={shiftX:shiftX,shiftY:shiftY,step:step,delay:delay,frame:0,frames:frames,stop:!1,"this":$this},stepAnim(id)}}else anim[id].frame=0,anim[id].stop=!1,stepAnim(id)}function stepAnim(id){var shiftX=anim[id].shiftX+anim[id].step*anim[id].frame,shift="-"+shiftX+"px "+anim[id].shiftY+"px";anim[id]["this"].css("background-position",shift),anim[id].frame++,anim[id].frame>=anim[id].frames&&(anim[id].frame=0),setTimeout(function(){anim[id].stop||stepAnim(id)},anim[id].delay)}function stopAnim($this){var id=$this.attr("id");anim[id].stop=!0}var anim={};$(".bg-anim").on({mouseenter:function(){startAnim($(this))},mouseleave:function(){stopAnim($(this))}})});