如何为 Ionicon 的颜色设置动画？答案

【问题标题】：How to animate the color of an Ionicon?如何为 Ionicon 的颜色设置动画？
【发布时间】：2015-05-18 14:59:48
【问题描述】：

我想要一个 ionicon（猜它的 SVG）来迭代地改变颜色。我尝试了以下方法，但它只显示紫色的 svg 图标：

元素

<a class="ion-social-twitter button-home"></a>

css

.button-home {
    fill: #fff;
    -webkit-animation: animation-button 20000ms infinite;
    -moz-animation: animation-button 20000ms infinite;
    -o-animation: animation-button 20000ms infinite;
    animation: animation-button 20000ms infinite;
    font-size: 25vh;
}

@-webkit-keyframes animation-button {
    0%   {fill:red; }
    25%  {fill:yellow; }
    50%  {fill:blue; }
    75%  {fill:green; }
    100% {fill:red; }
}
@keyframes animation-button {
    0%   {fill:red; }
    25%  {fill:yellow; }
    50%  {fill:blue; }
    75%  {fill:green; }
    100% {fill:red; }
}

【问题讨论】：

如果你的代码用在<svg> 元素上，它就可以工作。 Fiddle
已将问题更改为：如何为离子图标的颜色设置动画。我以为这是一个svg图标？对我来说，它不起作用，颜色保持紫色。
ionicon 是一种字体。您可以尝试将其动画化为color。

标签： html css svg ionicons

【解决方案1】：

您使用 ionicons 作为字体。只需将fill 更改为color，就像这样 -

@-webkit-keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

@keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

这里是 Bootstrap Glyphicons 的演示。

Fiddle

【讨论】：

@SeanHalls 感谢您的通知，我已经修好了小提琴。

【解决方案2】：

它的图标类型字体，所以很适合使用color（不是fill）

.button-home {
    color: #fff;
    -webkit-animation: animation-button 20000ms infinite;
    -moz-animation: animation-button 20000ms infinite;
    -o-animation: animation-button 20000ms infinite;
    animation: animation-button 20000ms infinite;
    font-size: 25vh;
}

@-webkit-keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}
@keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

【讨论】：