CSS3 color animation not firing in Chrome
In Chrome, I can't seem to get a simple CSS3 color animation to work with the A tag on a website I'm developing. However, changing the background-color property works fine. It works in Internet Explorer and Edge.
The strangest thing is that I could NOT reproduce the error in the JSFiddle or otherwise isolate it: http://jsfiddle.net/5atbm42b/2/
Any ideas / tips for further investigation? I know I can switch to jQuery animations, but maybe I am facing a browser error.
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 shown in the browser 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;
source to share
It looks like the problem here is that the stylesheets are included in the page. In the script, 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, these are:
- 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">
This way, the color you set in your custom styles is overridden by the loading styles. The fix .glyphicon
could be forcing the color of the tag a
containing it to be inherited 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>
source to share