CSS/jQuery：使图标闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4662473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS/jQuery: make the icon blink
提问by Karem
I remember doing some css learning where i learned to make text-decoration: blink, and the text started blinking.
我记得做了一些 css 学习，在那里我学会了制作文本装饰：闪烁，文本开始闪烁。
Now i have a icon,
现在我有一个图标，
.iconPM{
background: url(../images/icons/mail_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}
Wonder if i can make this blink, either by simple css or jquery if required. Or maybe any other nice effects available in jquery recommended
想知道我是否可以使这个闪烁，如果需要，可以通过简单的 css 或 jquery。或者可能推荐在 jquery 中可用的任何其他不错的效果
回答by Hoatzin
A simple jquery like this would do it:
像这样一个简单的 jquery 就可以做到：
function blink(){
$('.iconPM').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink);
}
$(document).ready(function() {
blink();
});
回答by SeinopSys
CSS animations are fairly well supportednow, so I thought I'd share a CSS only answer.
CSS 动画现在得到了很好的支持，所以我想我会分享一个 CSS 唯一的答案。
.iconPM {
background: url(https://raw.githubusercontent.com/stephenhutchings/typicons.font/493867748439a8e1ac3b92e275221f359577bd91/src/png-24px/mail.png) center no-repeat;
background-size: 16px 16px;
width: 16px;
height: 16px;
border: none;
display:inline-block;
animation: blink 2s ease-in infinite;
}
@keyframes blink {
from, to { opacity: 1 }
50% { opacity: 0 }
}<span class="iconPM"></span>回答by Petr Kozelek
What about this?
那这个呢？
CSS:
CSS：
.iconPM.no-image{ background:none; }
JS:
JS：
var toggleClassFcn = function(){$(".iconPM").toggleClass("no-image");}
setInterval(toggleClassFcn, 300);
Just be careful as with any other animations on the page. It will consume thread on the page.
与页面上的任何其他动画一样小心。它将消耗页面上的线程。
回答by Kissaki
No, not possible with CSS alone.
不，单独使用 CSS 是不可能的。
jQuery itself does not have predefined animations but provides methods to easily animateit yourself.
jQuery 本身没有预定义的动画，但提供了一些方法来轻松地自己制作动画。
For a blink-like:
对于眨眼般的：
function t1(){
jQuery(".iconPM").animate({
opacity: 0,
}, 1000 );
}
function t2(){
jQuery(".iconPM").animate({
opacity: 0,
}, 1000 );
}
runT1 = true;
function rr() {
if (runT1) {
t1();
} else {
t2();
}
// toggle between 2 fns
runT1 = !runT1;
setTimeout("rr()", 500);
}
rr();
