CSS3 color animation doesn't fire in Chrome

Question

In Chrome, I can't get a simple CSS3 color animation to work on an A-tag in the website I'm developing. Changing to the background-color property works fine though. It works in Internet Explorer and Edge.

The strangest thing is that I could NOT reproduce the error in JSFiddle or otherwise isolate it: http://jsfiddle.net/5atbm42b/2/

Any ideas/tips to continue investigation? I know I can switch to jQuery animations but I might have run into a browser bug.

body {
    font-family: Verdana, sans;
    font-size: 11px;
    line-height: 14px;
    -webkit-font-smoothing: antialiased !important;
}
.blink {
    -webkit-animation: blink .5s alternate infinite;
    -moz-animation: blink .5s alternate infinite;
    -ms-animation: blink .5s alternate infinite;
    -o-animation: blink .5s alternate infinite;
    animation: blink .5s alternate infinite;
}

@-webkit-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@-moz-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@-ms-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@-o-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div id="test">
    <a href="#" style="font-size: 1.2em" class="blink">
        <span class="glyphicon glyphicon-record"></span>
    </a>
</div>

For reference, here is the computed CSS styling of my A tag as it shows in the browser's developer tools:

-webkit-font-smoothing: antialiased;
animation-delay: 0s;
animation-direction: alternate;
animation-duration: 0.5s;
animation-fill-mode: none;
animation-iteration-count: infinite;
animation-name: blink;
animation-play-state: running;
animation-timing-function: ease;
background-color: rgba(0, 0, 0, 0);
box-sizing: border-box;
color: rgb(51, 122, 183);
cursor: auto;
display: inline;
font-family: Verdana, sans;
font-size: 13.1999998092651px;
height: auto;
line-height: 14px;
text-decoration: none;
width: auto;

Answer 1

It looks like the issue here is the order in which the stylesheets are included on the page. In the fiddle the order is:

• <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
• <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
• Custom styles

In the Stack snippet it is:

• Custom styles
• <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
• <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

So the color you are setting in your custom styles is being over-written by the bootstrap styles. To fix, .glyphicon can be forced to inherit the color of the a tag containing it by adding .blink .glyphicon { color: inherit; }.

body {
    font-family: Verdana, sans;
    font-size: 11px;
    line-height: 14px;
    -webkit-font-smoothing: antialiased !important;
}
.blink {
    -webkit-animation: blink .5s alternate infinite;
    -moz-animation: blink .5s alternate infinite;
    -ms-animation: blink .5s alternate infinite;
    -o-animation: blink .5s alternate infinite;
    animation: blink .5s alternate infinite;
}
.blink .glyphicon {
  color: inherit; 
}

@-webkit-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@-moz-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@-ms-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@-o-keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}
@keyframes blink {
    from { color: #000; }
    to { color: #f00; }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div id="test">
    <a href="#" style="font-size: 1.2em" class="blink">
        <span class="glyphicon glyphicon-record"></span>
    </a>
</div>