I want to play gif every time I click

Question

Current status

I have a gif that is played only once.
I want to play gif every time I click the button.
For now, once it finish playing gif, it stop moving at the end after the second time.

---

Current code

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 + ')');

The whole picture

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>

In my case, how can I play gif per click?

---

Add

JSFiddle
codepen

When I tried it with JSFiddle and codepen, it worked correctly. :O
(A gif is played with every click)

Does gif not work properly in a local environment?

Answer 1

而不是$(".target").attr('background', ...)设置$(".target").css('background', ...) ，元素没有本机background属性，并且设置它不会触发任何本机操作。