javascript - 每次点击都想播放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属性，设置它不会触发任何原生 Action 。