CSS動畫搖擺

Question

請參照這個提琴：https://jsfiddle.net/dricardo1/9a8p6srb/

嗨。我有一個旋轉的圖像使用CSS變換：旋轉。我還沒有找到一種方法來阻止非常明顯的抖動，並使圖像看起來像從一個穩定的中心旋轉。我試着調整利潤率等。任何想法將不勝感激。我已經搜索過，並已找到此參考，但似乎沒有幫助。謝謝！ 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類