css - 动画图标字体微调器

Question

我在我的自定义图标字体中创建了 12 个字形来表示加载微调器(OSX/iOS 样式)的每个刻度。

标记看起来像这样

<div class="spinner">
  <span class="c1">&#xf001</span>
  ...
  <span class="c12">&#xf012</span>
</div>

这是 CSS

.spinner {
  font-family: "nvicons";
  font-size: 24px;
  letter-spacing: -1em;
  .c1 {
    color: #eee;
  }

  ...

  .c12 {
    color: #222;
  }
}

现在我想在刻度字形的情况下对颜色进行动画处理，但不幸的是 color css 属性似乎无法设置动画并且 background 似乎对此没有帮助案件。此外，我没有找到使用关键帧制作动画的方法，因为动画很流畅，不像我需要的那样急躁。

是否可以使用 CSS 对其进行动画处理？我需要做的是以某种方式循环颜色，我真的想避免 JS。

Answer 1

找到了更好的解决方案。放在一起jsfiddle

.spinner {
    position: relative;
    font-family:"nvicons";
    font-size: 24px;
    letter-spacing: -1em;
    color: #eee;
    text-rendering: optimizeSpeed;
}
.spinner > span {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: coloring 1s linear infinite;
}
.spinner .e1 {
    -webkit-animation-delay: 0.0s;
}
.spinner .e2 {
    -webkit-animation-delay: 0.08333s;
}
.spinner .e3 {
    -webkit-animation-delay: 0.16667s;
}
.spinner .e4 {
    -webkit-animation-delay: 0.25s;
}
.spinner .e5 {
    -webkit-animation-delay: 0.33333s;
}
.spinner .e6 {
    -webkit-animation-delay: 0.41667s;
}
.spinner .e7 {
    -webkit-animation-delay: 0.5s;
}
.spinner .e8 {
    -webkit-animation-delay: 0.58333s;
}
.spinner .e9 {
    -webkit-animation-delay: 0.66667s;
}
.spinner .e10 {
    -webkit-animation-delay: 0.75s;
}
.spinner .e11 {
    -webkit-animation-delay: 0.83333s;
}
.spinner .e12 {
    -webkit-animation-delay: 0.91667s;
}
@-webkit-keyframes coloring {
    from {
        color: #222;
    }
    to {
        color: #eee;
    }
}