アプリケーションでblink
を使用してエラーメッセージを表示しています。問題は、Firefoxでは機能するがChromeでは機能しないことです。何が問題なのかわかりません。 Chromeで動作させるにはどうすればよいですか?
次のコードを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;
}
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 }}
これは非推奨であるため、JavaScriptを使用して試してみてください。ここに私がjqueryからあなたのために作った例があります: http://jsfiddle.net/FPsdy/ とても簡単です:
window.setInterval(function(){
$('.blink').toggle();
}, 250);
Blinkは非推奨であり、使用しないでください。
次のコード行を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ブラウザを更新してみてください。
このコードを使用するには、インポートする必要があるのはjquery.min.jsファイルだけです。
window.setInterval(function(){
$('.blink').css("opacity","0.5");
window.setTimeout(function(){
$('.blink').css("opacity","1");
},750);
}, 1500);