Css 动画图标字体微调器

我已经在我的自定义图标字体中创建了12个标志符号来表示加载微调器的每个刻度（OSX/iOS样式）

标记看起来像这样

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

现在我想在勾号图示符中设置颜色的动画，但不幸的是，

color

css属性似乎无法设置动画，而且在这种情况下，

background

似乎没有任何帮助。此外，我没有找到一种使用关键帧设置动画的方法，因为动画是平滑的，不像我需要的那样前卫

---

有没有可能用CSS制作动画？我需要做的是以某种方式循环颜色，我真的想避免JS。

你应该做的是将微调器图标以固定距离围绕一个点放置12次，每个点与其相邻的部分间隔30度。然后将第一块（12点钟）的背景更改为要开始动画的第三种最暗颜色。然后，在动画设定的时间段后，将第三种最暗的颜色移动到下一块作为其背景。如果你能给我提供你的图标字体，我会给你一个jsfiddle。

我不确定我是否满足所有要求，但我想说的是，你正在尝试按顺序更改元素的颜色

当你说你希望动画是尖锐的，而不是平滑的，这可以通过关键帧来完成，它只是给你多一点工作。您只需创建与其他步骤非常接近的重复步骤：

@-webkit-keyframes colors {
    0%   {color: red;}
    49%  {color: red;}
    50%  {color: blue;}
    100% {color: blue;}

}

请注意，从红色到蓝色的所有变化都在49%到50%之间

当然，这可以扩展到您想要的步骤数量；只是每个属性都需要声明两次

还请注意，我确实在更改颜色。演示（仅webkit）：

新答案

现在，您想要什么已经很清楚了，最好的解决方案是：

请注意，在结束时，您正在进行旋转：

@-keyframes ajax-loader-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

要隐藏中间步骤（圆将位于中间位置），动画将按步骤完成：

animation: .85s ajax-loader-rotate steps(8) infinite;

---

当然，所有这些都带有供应商前缀。

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

---

如果没有标记/css，我不理解你的答案。您可以假设预旋转的记号是unicode值

f001

到

f012

。您的答案正是我说的那样…这是一个很棒的工作！如果你给我图标字体，我会给你所有你需要的东西…就像我在回答中说的。。。

animation: .85s ajax-loader-rotate steps(8) infinite;

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