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

Posted 2023-03-06

【中文标题】CSS3 无限动画循环在谷歌浏览器 31.0.1650.57 中不起作用

【英文标题】：CSS3 inifnite animation loop is not working in google chrome 31.0.1650.57

【发布时间】：2013-12-18 10:48:53

【问题描述】：

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）

【参考方案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/

【讨论】：

我不会说这是一个错误。我自己很不擅长插值布尔值。 “真”和“假”的平均值是多少？

这是一个错误。由于第一个动画循环，它工作正常。