For assistance with my spinning image, please check out this fiddle: https://jsfiddle.net/dricardo1/9a8p6srb/
Hello! I'm struggling with a spinning image that has a noticeable wobble when rotating. I can't seem to find a solution to make the rotation appear smoother and centered from a stable point. I've tried adjusting margins, but haven't had much luck. Any suggestions would be greatly appreciated. I did some research on SO and came across this reference, but it hasn't solved my issue. Thank you! 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);
}
}