CSS 动画放慢位置

Question

我现在正在为学校做一个元素，我想在其中加入一个微调器。我用 CSS 为它制作动画，主要是因为那是我能够做到的。 This is what I have JS Fiddle.

el = document.getElementById("spinButan");
el.onclick = mrbones;


function mrbones() {
  time = Math.floor(3 + Math.random() * 3);
  //time = 10;
  document.getElementById("simple-ss").style.WebkitAnimationPlayState = "running";
  document.getElementById("simple-ss").style.animationPlayState = "running";
  document.getElementById("simple-ss").style.WebkitAnimationDuration = 3 / time + "s";
  document.getElementById("simple-ss").style.animationDuration = 3 / time + "s";
  spook = setInterval(wildride, 1000);
}

function wildride() {

  time -= Math.random() / 2;
  document.getElementById("simple-ss").style.WebkitAnimationDuration = 3 / time + "s";
  document.getElementById("simple-ss").style.animationDuration = 3 / time + "s";
  //time = time-0.5;
  document.getElementById("speedDisp").innerHTML = "speed:" + time
  if (time < 0) {
    clearInterval(spook);
    iwantoff();
  };
}

function iwantoff() {
  document.getElementById("simple-ss").style.WebkitAnimationPlayState = "paused";
  document.getElementById("simple-ss").style.animationPlayState = "paused";
}

/* USUAL STUFF */

body {
  margin: 10px auto;
  text-align: center;
}
.content {
  max-width: 800px;
  text-align: left;
  margin: auto;
}
/* THE DIV */

.simple-ss {
  width: 510px;
  height: 102px;
  background-color: red;
  margin: auto;
  background-image: url("http://puu.sh/lLcbc/c78e439426.png");
  background-position: 0;
  background-repeat: no-repeat;
  background-size: cover;
  /* ANIMATING STUFF */
  animation-name: slide;
  /* 1s linear 0 infinite normal none running;*/
  animation-duration: 10s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
/* NOTE CODEPEN AUTOGENERATING -PREFIXES */

@keyframes slide {
  0% {
    background-position: 0 0;
  }
  /*12.5% {background-position:-102px 0;}
  25% {background-position:-204px 0;}
  37.5% {background-position:-306px 0;}
  50% {background-position:-408px 0;}
  62.8% {background-position:-510px 0;}
	75% {background-position:-612px 0;}
	87.5% {background-position:-714px 0;}*/
  100% {
    background-position: -714px 0;
  }
}

<button id="spinButan" type="button" onclick="mrbones()">Take it for a spin.</button>
<div class="simple-ss" id="simple-ss">
  <img src="http://puu.sh/lLaGx/dee7ea368b.png">
</div>
<div id="speedDisp">
  speed:
</div>

目前微调器以随机速度启动，随机减速，并在速度足够慢后停止。但每次它减速时，它都会跳到不同的位置。关于如何解决这个问题的任何想法？谢谢。

Answer 1

使用以下内容更新您的 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";

}

这是 fork 的 jsFiddle