Эффект анимации для gif-картинки

Гифка же и так анимированная подумали вы, но не все так просто, все еще проще.

У меня в черновкиах есть несколько записей про анимацию svg, но до сих пор не сформировал в статейку. А тут на каком-то сайте наткнулся на прикольные анимированные svg-иконки, которые прорисовываются при наведении на них курсора. Решил посмотреть в исходном коде, как кодер реализовал эти иконки, ведь там кроме линий были еще цветные фигуры, и тут я заметил, что это вовсе не svg, а gif… Но гифка же загружается при загрузке один раз, как же сделана ее анимация при ховере? Да очень просто.

Вот код для создания эффекта анимации gif-ки:

$(function(){
  $('.animated-gif').hover(getImgSrc);

  function getImgSrc() {
    var $this = $(this);
    var $src = $this.attr('src');

    $this.attr('src', $src);
  }
});

Естественно, сначала подключаем jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Суть в том, что при наведении на картинку, в картинке подменяется урл картинки, и картинка подгружается еще раз, поскольку урл подставляется тот же самый.

Вот рабочий пример анимированной гифки (при первом наведении курсора может быть небольшое дергание картинки из-за загрузки оной через codepen с внешенего ресурса с http-протоколом):

See the Pen Gif with animation on hover with jQuery by Denis (@deniscreative) on CodePen.0