Webkit变换:旋转

Question

我有一个代码：

HTML:

<section class="progress">
    <div class="spinner icon-spinner" aria-hidden="true"></div>
  <p class="label">Loading</p>
</section>

CSS：

@font-face {
    font-family: 'icomoon';
    src:url('http://s3.amazonaws.com/icomoonfonts/4/6/f.eot');
    src:url('http://s3.amazonaws.com/icomoonfonts/4/6/f.eot?#iefix') format('embedded-opentype'),
        url('http://s3.amazonaws.com/icomoonfonts/4/6/f.woff') format('woff'),
        url('http://s3.amazonaws.com/icomoonfonts/4/6/f.ttf') format('truetype'),
        url('http://s3.amazonaws.com/icomoonfonts/4/6/f.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon-spinner:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "e002";
}
@keyframes anim-rotate {
    0% {
        transform: rotate(0);
    opacity: 1;
    }
  50% {
    opacity: .7;
  }
    100% {
        transform: rotate(359deg);
    opacity: 1;
    }
}
.spinner {
    display: inline-block;
    font-size:64px;
    height: 64px;
    line-height: 1;
    margin: .1em;
    animation: anim-rotate 3s infinite linear;
    color: rgba(223,78,107, 1);
}
body {
  text-align: center;
    line-height: 1.5;
    background: #fff;
}
.progress {
  margin:2em;
}
.progress .label {
  color:#777;
  margin:0;
  font-size:16px;
  font-family: Tahoma,Verdana,sans-serif;
}

示例：http://codepen.io/anon/pen/BfKaA/

为什么这个rotate(0deg); -> rotate(359deg);在Chrome中旋转时会抖动？FF中的这个例子正在发挥作用。有人能在Chrome中更改代码以获得平滑的旋转吗？

Answer 1

试试。。。

  @keyframes anim-rotate {
    0% {
        transform: rotate(0);
    opacity: 1;
    }
  50% {
    opacity: 1;
  }
    100% {
        transform: rotate(360deg);
    opacity: 1;
    }