CSS animation wobble

Question

Please refer to this fiddle: https://jsfiddle.net/dricardo1/9a8p6srb/

Hi. I have a spinning image using css transform : rotate. I have not found a way to stop the very noticeable wobble and make the image appear to rotate from a stable center. I've tried adjusting margins, etc. Any ideas would be appreciated. I have searched on SO and have found this reference, but doesn't seem to help. Thanks! 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

Try adding background-position:center; to you wheel_spin classes