Cómo hacer parpadear un texto en CSS

Cómo hacer parpadear un texto en CSS

parpadear texto en css

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>

Centro de preferencias de privacidad