html - 奇怪的 CSS 动画问题， 标签覆盖 Chrome 中的动画

Question

我正在使用 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 上，并且在我尝试过的所有其他浏览器上都运行良好。

非常感谢。

Answer 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?