Question

CSS3动画无效。它只需要使用css3。

HTML

<b>blink!</b>

CSS

@-webkit-keyframes datetime-blinker {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}
@-moz-keyframes datetime-blinker {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}
@-o-keyframes datetime-blinker {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}
@keyframes datetime-blinker {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}

b {

    -webkit-animation: datetime-blinker 2s steps(2) 1s infinite; /* Safari 4+ */
    -moz-animation:    datetime-blinker 2s steps(2) 1s infinite; /* Fx 5+ */
    -o-animation:      datetime-blinker 2s steps(2) 1s infinite; /* Opera 12+ */
    animation:         datetime-blinker 2s steps(2) 1s infinite; /* IE 10+ */
}

http://jsfiddle.net/hYsG8/

错误跟踪器： https://code.google.com/p/chromium/issues/detail?id=324818&thanks=324818&ts=1386002678

错误已修复（Google Chrome 33.0.1734.2 canary）

Answer 1

看起来你发现了一个错误。我猜Chrome在动画布尔值方面并不擅长。

您可以使用不透明度作为解决方法：

@keyframes datetime-blinker {
    0% { opacity: 0.0; }
    49% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 1.0; }
}

http://jsfiddle.net/hYsG8/1/

CSS3 inifnite动画循环在谷歌浏览器31.0.1650.57中不起作用

1 个答案: