<a> 标签覆盖 Chrome 中的动画的奇怪 CSS 动画问题答案

【问题标题】：Strange CSS Animation issue with <a> tag overriding animation in Chrome<a> 标签覆盖 Chrome 中的动画的奇怪 CSS 动画问题
【发布时间】：2015-12-14 14:55:33
【问题描述】：

我正在使用 MyBB 创建一个论坛，HTML 和 CSS 非常简单。我有一个自定义等级，应该使用关键帧制作彩虹动画，这是它的 CSS（没问题）：

.rainbowUser {
    color: rgb(255,0,0) !important;
    text-decoration: underline;
    font-weight: bold;
    -webkit-animation-name: colorRotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: colorRotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: colorRotate;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -o-animation-name: colorRotate;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    animation-name: colorRotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.2% {
        color: rgb(0, 0, 255);
    }
    49.8% {
        color: rgb(0, 255, 255);
    }
    66.4% {
        color: rgb(0, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}
@-moz-keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.2% {
        color: rgb(0, 0, 255);
    }
    49.8% {
        color: rgb(0, 255, 255);
    }
    66.4% {
        color: rgb(0, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}
@-ms-keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.2% {
        color: rgb(0, 0, 255);
    }
    49.8% {
        color: rgb(0, 255, 255);
    }
    66.4% {
        color: rgb(0, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}
@-o-keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.2% {
        color: rgb(0, 0, 255);
    }
    49.8% {
        color: rgb(0, 255, 255);
    }
    66.4% {
        color: rgb(0, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}
@keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.2% {
        color: rgb(0, 0, 255);
    }
    49.8% {
        color: rgb(0, 255, 255);
    }
    66.4% {
        color: rgb(0, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

动画可以正常播放并在this 页面上运行，但在其他任何地方都无法运行。将元素移出它包含的标签使其工作。以下是从开发者工具中获取的标记代码：

a:link, a:visited {
    color: #005ea7;
    text-decoration: none;
}
a:link, a:visited {
    color: #005ea7;
    text-decoration: none;
}
user agent stylesheeta:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

标签和跨度 HTML：

<a href="http://supernova-networks.co.uk/forum/member.php?action=profile&amp;uid=3" original-title="">
<span class="rainbowUser" original-title="">[S-N] Bena</span>
</a>

我真的不太确定该怎么做。这也只发生在 Chrome 上，并且在我尝试过的所有其他浏览器上都可以正常工作。

非常感谢。

【问题讨论】：

这可能无法解决您的问题，但我建议您使用 CSS 简写动画，这样您的 CSS 行数会更少，加载速度会更快 - animation: colorRotate 1s infinite。 “不工作”时显示什么颜色。如果我不得不冒险猜测，我会说它继承了 a:link 或 a:visited 样式。
是的，很抱歉没有使用速记。用 JS 操作起来更容易。

标签： html css google-chrome animation

【解决方案1】：

在 Chromium 团队修复此错误 (https://code.google.com/p/chromium/issues/detail?id=506898) 之前，您可以使用此处建议的纯 CSS 解决方法：Why doesn't my keyframe animation for link color work in Chrome?

【讨论】：

【解决方案2】：

实际上，这似乎是一个从未解决的 Chrome 错误。这是解决您的问题的方法，尽管它可能不是最好的。

改变

<a href="http://supernova-networks.co.uk/forum/member.php?action=profile&amp;uid=3" original-title="">
    <span class="rainbowUser" original-title="">
        [S-N] Bena
    </span>
</a>

到

<span class="rainbowUser" original-title="">
    [S-N] Bena
    <a href="http://supernova-networks.co.uk/forum/member.php?action=profile&amp;uid=3" original-title="">
    </a>
</span>

另外，将cursor: pointer 属性添加到你的css中的彩虹用户。

现在有点 jQuery 来修复跨度没有将用户引导到正确的页面。

$(".rainbowUser").click(function () {
    var link = $("a", this).attr("href");
    window.location = link;
});

应该可以的。

【讨论】：

非常感谢，我可以为此调整模板。