jquery - 是否可以在单击运行按钮之前以暂停状态启动-webkit-animation？

Question

我目前正在制作一个将图像从左向右移动的动画。一个问题是它在我点击运行小 pig 按钮之前启动了动画。

所以我想知道是否可以在暂停状态下启动并仅在我按下运行小 pig 按钮时触发动画？

如果我想实现我所说的，我不确定这是否是正确的方向。

<div class="animation"></div>

<button id ="start">Run piggy</button>
<button id ="stop">Stop piggy</button>

<script>
$(document).ready(function(){
    $("#start").click(function()
    {
        $(".animation").css("animation-play-state","running");
    }); 

    $("#stop").click(function(){
        $(".animation").css("animation-play-state","paused");

    });
}); 

</script>

.animation
{
    height:500px;
    margin: 50px 0;
    background: url("Pig.gif") no-repeat left center; 
    -webkit-animation: test 10s infinite;
    animation: test 10s infinite;
}
@-webkit-keyframes test 
{
    50% {background-position: right center;}
}
@keyframes test 
{
    50% {background-position: right center;}
}

Answer 1

您也将 animation-play-state 初始化为 paused:

$(document).ready(function() {
  $("#start").click(function() {
    $(".animation").css("animation-play-state", "running");
  });

  $("#stop").click(function() {
    $(".animation").css("animation-play-state", "paused");

  });
});

.animation {
  height: 500px;
  margin: 50px 0;
  background: url("http://via.placeholder.com/350x150") no-repeat left center;      
  animation: test 10s infinite;
  animation-play-state: paused;
}

@-webkit-keyframes test {
  50% {
    background-position: right center;
  }
}

@keyframes test {
  50% {
    background-position: right center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation"></div>

<button id="start">Run piggy</button>
<button id="stop">Stop piggy</button>