Question

请参考这个小提琴：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类

CSS动画摆动

1 个答案: