CSS动画减速位置

我现在正在为学校做一个项目，我想在其中有一个旋转器。我用CSS制作了动画，主要是因为我能够做到这一点

el=document.getElementById（“spinButan”）；
el.onclick=mrbones；
函数mrbones（）{
时间=Math.floor（3+Math.random（）*3）；
//时间=10；
document.getElementById（“simple ss”）.style.WebkitAnimationPlayState=“running”；
document.getElementById（“simple ss”）.style.animationPlayState=“running”；
document.getElementById（“简单ss”）.style.WebkitAnimationDuration=3/次+s；
document.getElementById（“简单ss”）.style.animationDuration=3/次+s；
spook=设定间隔（wildride，1000）；
}
函数wildride（）{
时间-=Math.random（）/2；
document.getElementById（“简单ss”）.style.WebkitAnimationDuration=3/次+s；
document.getElementById（“简单ss”）.style.animationDuration=3/次+s；
//时间=时间-0.5；
document.getElementById（“speedDisp”）.innerHTML=“速度：”+时间
如果（时间<0）{
clearInterval（spook）；
伊万托夫（）；
};
}
函数iwantoff（）{
document.getElementById（“simple ss”）.style.WebkitAnimationPlayState=“暂停”；
document.getElementById（“简单ss”）.style.animationPlayState=“暂停”；
}

/*常见的东西*/
身体{
利润率：10px自动；
文本对齐：居中；
}
.内容{
最大宽度：800px；
文本对齐：左对齐；
保证金：自动；
}
/*潜水艇*/
.简单ss{
宽度：510px；
高度：102px；
背景色：红色；
保证金：自动；
背景图像：url（“http://puu.sh/lLcbc/c78e439426.png");
背景位置：0；
背景重复：无重复；
背景尺寸：封面；
/*动画素材*/
动画名称：幻灯片；
/*1s线性0无限正常无运行*/
动画持续时间：10秒；
动画方向：正常；
动画计时功能：线性；
动画迭代次数：无限；
动画播放状态：暂停；
}
/*注：代码笔自动生成-前缀*/
@关键帧滑动{
0% {
背景位置：0；
}
/*12.5%{背景位置：-102px 0；}
25%{背景位置：-204px 0；}
37.5%{背景位置：-306px 0；}
50%{背景位置：-408px 0；}
62.8%{背景位置：-510px 0；}
75%{背景位置：-612px 0；}
87.5%{背景位置：-714px 0；}*/
100% {
背景位置：-714px0；
}
}

拿着它转一圈。
速度：

使用以下内容更新您的

mrbones

功能

function mrbones() {
    time = 10;
    document.getElementById("simple-ss").style.WebkitAnimationPlayState = "running";
    document.getElementById("simple-ss").style.animationPlayState = "running";
    document.getElementById("simple-ss").style.WebkitAnimationDuration = time+"s";
    document.getElementById("simple-ss").style.animationDuration = time+"s";

}

---

这是分叉的

我需要让它慢一点停下来。这似乎不是那样的。但是谢谢你的回复。