javascript - CSS动画摆动

Question

请引用这个 fiddle :https://jsfiddle.net/dricardo1/9a8p6srb/

嗨。我有一个使用 css 变换的旋转图像:旋转。我还没有找到一种方法来阻止非常明显的摆动并使图像看起来从稳定的中心旋转。我试过调整边距等。任何想法将不胜感激。我搜索了 SO 并找到了这个引用，但似乎没有帮助。谢谢! Internet Explorer 11 wobbly CSS3 animation

    wheel_spin {
  background-image: url("https://dricardo1.github.io/pdi_wheel_app/myApp/www/img/pdiwheel.png");
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  margin-left: 10%;
}
.wheel_spin_on {
  background-image: url("https://dricardo1.github.io/pdi_wheel_app/myApp/www/img/pdiwheel.png");
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  margin-left: 10%;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
.wheel_spin_stopping {
  background-image: url("https://dricardo1.github.io/pdi_wheel_app/myApp/www/img/pdiwheel.png");
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  margin-left: 10%;
  -webkit-animation-name: slowdown;
  -webkit-animation-duration: 6000ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}
  @-webkit-keyframes spin {
    from {
    -webkit-transform: rotate(0deg);
    }
    to {
    -webkit-transform: rotate(360deg);
  }
  }
    @-webkit-keyframes slowdown {
    0% {
    -webkit-transform: rotate(0deg);
    }
    13% {
    -webkit-transform: rotate(646deg);
  }
    25% {
    -webkit-transform: rotate(1093deg);
    }
    38% {
    -webkit-transform: rotate(1566deg);
  }
    50% {
    -webkit-transform: rotate(1931deg);
    }
    63% {
    -webkit-transform: rotate(2211deg);
    }
    75% {
    -webkit-transform: rotate(2394deg);
    }
    88% {
    -webkit-transform: rotate(2491deg);
    }
    100% {
    -webkit-transform: rotate(2520deg);
  }
}

Answer 1

尝试将 background-position:center; 添加到 wheel_spin 类