Как сделать текст миганием на веб-сайте?

Я делаю веб-сайт, и я хочу, чтобы на странице мигала гиперссылка. Не важно, как быстро это происходит, только не слишком медленно. Было бы здорово, если бы я мог мигать в разных цветах.

Я попытался использовать text-decoration: blink; в css, но это не сработало.

Я добавил это в 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;
}

Кажется не работает

Ответы

Ответ 1

Вы можете сделать это довольно легко с помощью анимации CSS.

a {   
  animation-duration: 400ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

Вы также можете расширить его, чтобы изменить цвета. Что-то вроде:

@keyframes blink {
  0% {
    opacity: 1;
    color: pink;
  }

  25% {
    color: green;
    opacity: 0;
  }

  50% {
    opacity: 1;
    color: blue;
  }

  75% {
   opacity: 0;
   color: orange;
 }

 100% {
   opacity: 1;
   color: pink;
 }
}

Обязательно добавьте префиксы поставщика

Демо: http://codepen.io/pstenstrm/pen/yKJoe

Update

Чтобы удалить эффект затухания, вы можете сделать:

b {
  animation-duration: 1000ms;
  animation-name: tgle;
  animation-iteration-count: infinite;
}

@keyframes tgle {
  0% {
    opacity: 0;
  }

  49.99% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }

  99.99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Это также полезный трюк при анимации image-sprites

Ответ 2

Легко сделать текст мигающим:

window.setInterval(function() {
$('#blinkText').toggle();
}, 300);

и в html, просто введите следующее:

<p id="blinkText">Text blinking</p>

Ответ 3

Кажется, вы скопировали код из принятого ответа на Blink, не работающий в Chrome. Однако ответ неверен и только пытается обратиться к браузерам WebKit. Следующий код работает в браузерах WebKit, в современном Firefox и в IE 10+ (я установил параметры для моделирования способа работы классического <blink>):

@keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0; }
}
blink {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-name: blink;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
}

Для реального кроссбраузерного решения вам необходим JavaScript. Его временные изменения сдвигаются; см., например, некоторые ответы на Текст мигает jQuery.