在单击“运行”按钮之前，是否可以在暂停状态下启动-webkit -nimation

Question

我当前正在做一个动画，将图像从左到右移动。一个问题是在我单击"运行小猪"按钮之前启动动画。

所以我想知道它是否可以在暂停状态开始并仅在按下Run Piggy按钮后才触发动画？

我不确定这是正确的方向，如果我想实现自己说的话。

<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>