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;
    }

Webkit转换：旋转

1 个答案: