Strange CSS Animation issue with <a> tag overriding animation in Chrome

Question

I am making a forum using MyBB and the HTML and CSS is pretty straight forward. I have a custom rank that should be making a rainbow animation using keyframes, here's the CSS for it (no problems):

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

The animation plays fine and works on this page, but doesn't work anywhere else. Moving the element out of the tag that it is contained in makes it work. Here's the tag code taken from developer tools:

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

tag and span 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>

I'm really not quite sure what to do. This also only happens on Chrome and works absolutely fine on every other browser I've tried.

Thanks very much.

Answer 1

在Chromium团队修复此错误（ https://code.google.com/p/chromium/issues/detail?id=506898 ）之前，您可以使用此处建议的纯CSS解决方法： 为什么我的关键帧动画没有链接色彩在Chrome中工作？

Answer 2

Actually, this seems to be a Chrome bug which has never been resolved. This is a solution to your problem, although it may not be the best one.

Change

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

To

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

Also, add the property cursor: pointer to rainbowUser in your css.

Now a bit of jQuery to fix the span not directing the user to the correct page.

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

That should do it.