CSS/jQuery: сделать значок мигающим

Я помню, как я начал изучать css, где я научился делать текстовое оформление: мигать, а текст начал мигать.

Теперь у меня есть значок,

.iconPM{
background: url(../images/icons/mail_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}

Интересно, могу ли я сделать это миганием, либо простым css, либо jquery, если это необходимо. Или, может быть, любые другие приятные эффекты, доступные в jquery рекомендуется

Ответ 1

Простой jquery, как это, сделает это:

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

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

Ответ 2

Как насчет этого?

CSS

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

JS:

var toggleClassFcn = function(){$(".iconPM").toggleClass("no-image");}
setInterval(toggleClassFcn, 300);

Просто будьте осторожны, как с любыми другими анимациями на странице. Он будет потреблять поток на странице.

Ответ 3

Анимированные анимации 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>

Ответ 4

Нет, невозможно с помощью CSS.

jQuery сам не имеет предопределенных анимаций, но предоставляет методы, чтобы легко анимировать его самостоятельно.

Для мигания:

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