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

点滅は非推奨であり、使用しないでください。

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);