Я хочу играть в GIF каждый раз, когда я нажимаю

Question

Текущий статус

У меня есть GIF, который играется только один раз.
Я хочу играть в gif каждый раз, когда нажимаю на кнопку.
На данный момент, как только он закончит играть gif, он перестанет двигаться в конце после второго раза.

---

Текущий код

CSS

    html { font-size: 62.5%; }

.target {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 37.6rem;
  height: 31.1rem;
  background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190410/20190410164103.gif);
}

@mixin ghost {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
  color: rgba(0, 0, 0, 1);
}

@keyframes inhale {
  from {
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
  }
  to {
    opacity: 0;
    top: calc(100% - 100px);
    left: calc(100% - 100px);
    transform: scale(0) translate(-50%, -50%);
  }
}

iframe {
  transform-origin: 0% 0%;
}

.clsbtn {
  outline: none;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  height: 3.5rem;
  line-height: 3.5;
  background: white;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0);
  z-index: 111;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  &:hover {
    @include ghost;
  }
}

.inhale {
  animation: inhale 1s cubic-bezier(0, 1, .56, 1);
}

JQuery

var timeStamp  = new Date().getTime();
        $(".target").attr('background','url(../img/score.gif' + '?' + timeStamp + ')');

Вся картинка

function closeBtn() {
    $(".clsbtn").on('click', function() {
        var target = $("<div>").addClass('target');

        // here
        var timeStamp  = new Date().getTime();
        $(".target").attr('background','url(../img/score.gif' + '?' + timeStamp + ')');

        $(this).hide();
        $("iframe").addClass('inhale').before(target).one('animationend', function() {
            $("iframe").removeClass('inhale').empty(target);
            $("#items").magnificPopup('close');
        });
    });
}

HTML

<div id="items">
    <section class="item" data-mfp-src="data1.html">
      <img src="img/a.png" alt="a" />
      <h2>title1</h2>
      <p>description1</p>
    </section>
    <section class="item" data-mfp-src="data2.html">
      <img src="img/b.png" alt="b" />
      <h2>title2</h2>
      <p>description2</p>
    </section>
...
</div>

В моем случае, как я могу играть в gif за клик?

---

Добавить

JSFiddle
codepen

Когда я попробовал это с JSFiddle и codepen, он работал правильно. : O
(GIF играется с каждым кликом)

Не работает ли gif в локальной среде?

Answer 1

Вместо $(".target").attr('background', ...) установить $(".target").css('background', ...), элементы не имеют собственного атрибута background, и установка его не вызывает никаких собственных действий.