css - 闪烁在 Chrome 中不起作用

Question

我blink在我的应用程序中使用来显示错误消息。问题是它可以在 Firefox 中运行，但不能在 Chrome 中运行。我不知道问题是什么。我怎样才能让它在 Chrome 中工作？

Answer 1

将以下代码添加到您的 css 文件中，

blink {
-webkit-animation-name: blink; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}

Answer 2

blink, .blink {
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 67% { opacity: 0 }}
@-moz-keyframes blink {  67% { opacity: 0 }}
@-o-keyframes blink {  67% { opacity: 0 }}
@keyframes blink {  67% { opacity: 0 }}

Answer 3

它已被弃用，因此您可以尝试使用 javascript 来执行此操作。这是我为您使用 jquery 制作的示例：http: //jsfiddle.net/FPsdy/这很简单：

window.setInterval(function(){
  $('.blink').toggle();
}, 250);

Answer 4

Blink 已弃用，您不应使用它。

http://www.w3.org/wiki/HTML/Elements/blink

Answer 5

尝试将以下代码行添加到您的 css 文件中。

blink {
   -webkit-animation-name: blink; 
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-timing-function: cubic- 
    bezierr(1.0,0,0,1.0);
    -webkit-animation-duration: 1s;
  }

这是因为许多浏览器不支持少数 css 函数。您应该尝试更新您的 chrome 浏览器。

Answer 6

只需要导入一个 jquery.min.js 文件即可使用此代码。

window.setInterval(function(){
    $('.blink').css("opacity","0.5");
    window.setTimeout(function(){
        $('.blink').css("opacity","1");
    },750);
}, 1500);