El elemento blink está obsoleto y los navegadores modernos ya no lo hacen parpadear. Crea un parpadeo accesible en CSS con botón de pausa, límite de ciclos y soporte de movimiento reducido.
El elemento blink está obsoleto: el estándar HTML lo considera no conforme y dice que se use CSS en su lugar, y los navegadores actuales muestran su texto como texto normal y quieto. Para hacer que algo parpadee hoy, escribe una animación CSS con keyframes, detenla tras unos pocos ciclos o da a la gente un control de pausa, y desactívala con prefers-reduced-motion.
El marcado blink antiguo y qué usar ahora
La etiqueta blink es un trozo de historia de la web que se sigue buscando, normalmente por alguien que quiere que parpadee un punto de estado, un cursor o una insignia de oferta. El generador de abajo crea ese efecto de forma moderna y lo mantiene dentro de las normas de accesibilidad, así que el movimiento es breve, se puede detener y respeta la configuración del visitante.
Ningún navegador actual la hace parpadear. El estándar HTML trata blink como un elemento obsoleto y no conforme, así que su contenido se muestra como texto en línea normal. Los validadores lo marcan como error.
El valor blink de text-decoration-line está obsoleto, y la especificación permite que los navegadores no hagan parpadear el texto en absoluto. Una animación con keyframes es el sustituto fiable.
WCAG 2.2.2 Pausar, detener, ocultar es una norma de nivel A: un parpadeo que empieza solo, dura más de cinco segundos y está junto a otro contenido necesita una forma de pausarlo, detenerlo u ocultarlo. Aparte, la 2.3.1 limita los destellos a tres en cualquier segundo.
Anima un borde fino o un carácter de barra vertical con steps(1) para que cambie entre visible y oculto, a un ciclo por segundo aproximadamente. Un cursor en una demo de escritura es decorativo, así que ponle aria-hidden="true".
Envuelve una regla de anulación en @media (prefers-reduced-motion: reduce) y pon animation: none en el elemento que parpadea. Esta media feature tiene amplio soporte y sigue la configuración de movimiento del sistema operativo del visitante.
Tres ciclos de un segundo terminan bastante antes de cinco segundos, así que no hace falta control de pausa. Recarga el marco editando el código.
steps(1, end) cambia al instante en lugar de hacer un fundido. El cursor es decorativo, así que se oculta a los lectores de pantalla.
Los navegadores dibujan el contenido de un elemento blink obsoleto como texto normal. Nada parpadea.
Si el parpadeo tiene que durar más de cinco segundos, dale un botón de verdad que lo detenga.
aria-pressed indica a las tecnologías de apoyo si la animación está en pausa en ese momento.
Nuevo
Ya está aquí el menú de primavera
Un ciclo: {n} ms
Fundido suave
Encendido y apagado brusco
Ciclos
Infinito
Desactivar con movimiento reducido
Pausar
Reanudar
Repetir
Tiempo total de ejecución: {n} segundos
Se ejecuta hasta que se pausa
Menos de cinco segundos, así que no hace falta control de pausa.
Más de cinco segundos: mantén un botón de pausa visible junto a él (WCAG 2.2.2).
Copiar CSS
Empieza gratis · Sin tarjeta de crédito