Cómo hacer parpadear un texto en CSS

7 julio 2016

Antaño existía una etiqueta html para hacer parpadear un texto. Hoy en día ha pasado a la historia. No obstante, gracias a la magia de las animaciones en CSS 3 podrás hacer que un texto no sólo parpadee (aparezca y desaparezca), sino que cambie de color o cualquier otro tipo de cambio de atributo en CSS que se te ocurra. Aquí tenemos algunos ejemplos que tienen como fuente stackoverflow.com – mitating a blink tag with css3 animations.

Cómo hacer aparecer y desaparecer un texto con CSS:

CSS:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

HTML:

This is <span class="blink">blinking</span> text.

Cómo hacer que cambie el color de un texto en CSS:

CSS:

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
}

HTML:

This is <span class="blink">blink</span>