Cómo hacer parpadear un 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> |