Question

在Chrome中，我无法获得一个简单的CSS3 颜色动画来处理我正在开发的网站中的A-tag。更改为 background-color 属性可以正常工作。它适用于Internet Explorer和Edge。

最奇怪的是，我可以不重现JSFiddle中的错误或以其他方式隔离它： http://jsfiddle.net/5atbm42b/2/

任何继续调查的想法/提示？我知道我可以切换到jQuery动画，但我可能遇到了浏览器错误。

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>

作为参考，这里是我的A标签的计算CSS样式，如它在浏览器的开发者工具中所示：

-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

这里的问题似乎是样式表包含在页面上的顺序。在小提琴中，顺序是：

script output.txt <cmd> exit
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
自定义样式

在Stack片段中，它是：

自定义样式
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<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">强制.glyphicon继承包含它的a标记的颜色。

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

CSS3中的CSS3颜色动画不会触发

1 个答案: