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

我现在正在做一个动画，从左到右移动图像。一个问题是，它在我单击RunPiggy按钮之前启动动画

所以我想知道是否有可能在暂停状态下启动，并且只在我按下RunPiggy按钮时触发动画

我不确定这是否是正确的方向，如果我想实现我所说的话，我很抱歉

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

---

使用

动画播放状态

初始化为

暂停

：

$（文档）.ready（函数（）{
$（“#开始”）。单击（函数（）{
$（“.animation”）.css（“动画播放状态”、“运行”）；
});
$（“#停止”）。单击（函数（）{
$（“.animation”）.css（“动画播放状态”，“暂停”）；
});
});
。动画{
高度：500px；
利润率：50px0；
背景：url（“http://via.placeholder.com/350x150）左中心无重复；
动画：测试10秒无限；
动画播放状态：暂停；
}
@-webkit关键帧测试{
50% {
背景位置：右中；
}
}
@关键帧测试{
50% {
背景位置：右中；
}
}

跑小猪
停止piggy
您使用
动画播放状态
初始化为
暂停
：


$（文档）.ready（函数（）{
$（“#开始”）。单击（函数（）{
$（“.animation”）.css（“动画播放状态”、“运行”）；
});
$（“#停止”）。单击（函数（）{
$（“.animation”）.css（“动画播放状态”，“暂停”）；
});
});
。动画{
高度：500px；
利润率：50px0；
背景：url（“http://via.placeholder.com/350x150）左中心无重复；
动画：测试10秒无限；
动画播放状态：暂停；
}
@-webkit关键帧测试{
50% {
背景位置：右中；
}
}
@关键帧测试{
50% {
背景位置：右中；
}
}

跑小猪
停止piggy
前缀
-webkit-
用于实验功能：它不应该用于生产，自2015年以来，Chrome就不再需要它了！哦，我是新来的，我最近才发现这个CSS功能，因为我需要做动画哈哈哈
-webkit-
前缀是用于实验性功能的：它不应该在生产中使用，而且从2015年起就不需要在Chrome中使用了！哦，我是新手，我最近才发现这个CSS函数，因为我需要做动画haha@darrylwong很高兴它成功了！如果答案有帮助，请接受。@darrylwong很高兴它奏效了！如果答案有帮助，请接受。
.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;}
}