CSS/jQuery: make the icon blink

Question

I remember doing some css learning where i learned to make text-decoration: blink, and the text started blinking.

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

Answer 1

A simple jquery like this would do it:

function blink(){
    $('.iconPM').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink);
}

$(document).ready(function() {
    blink();
});

Answer 2

CSS animations are fairly well supported now, so I thought I'd share a CSS only answer.

.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>

Answer 3

What about this?

CSS:

.iconPM.no-image{ background:none; }

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.