En los primeros días de la web, los elementos HTML como la etiqueta blink eran formas nativas de agregar algunos efectos de animación para animar una página web. ¿Cómo podemos usar esas animaciones hoy para agregar brillo a nuestros sitios web y aplicaciones?
- ¿Qué es el parpadeo de la etiqueta HTML?
- ¿Cómo se usa la etiqueta blink?
- ¿Todavía puedes usar la etiqueta blink?
- Recreando la etiqueta blink con animaciones CSS
¿Qué es el parpadeo de la etiqueta HTML?
La etiqueta blink ( ) es una etiqueta HTML obsoleta que hace que el contenido de esa etiqueta parpadee lentamente.
Esto, junto con algunas otras etiquetas obsoletas como la etiqueta de marquesina ( ), fue una manera fácil de agregar efectos de animación simples a su sitio.
¿Cómo se usa la etiqueta blink?
Dado que la etiqueta blink era un elemento HTML simple, la usaría en línea con su contenido.
Por ejemplo, si desea que la palabra "parpadear" en blink-182 parpadee, debe escribir el siguiente HTML:
blink-182
¿Todavía puedes usar la etiqueta blink?
Como habrás notado en el gif anterior, esta etiqueta está obsoleta.
Esto significa que no puede usar la etiqueta HTML blink en sí. Sin embargo, eso no debería impedirnos rehacerlo en todo su esplendor parpadeante.
Nota: la etiqueta Blink quedó obsoleta debido a problemas de accesibilidad. Investigue antes de intentar utilizar una solución que proporcione el mismo efecto, ya que todos deberíamos hacer un esfuerzo para que nuestros proyectos sean lo más inclusivos posible.
Recreando la etiqueta blink con animaciones CSS
En el mundo actual del desarrollo web, las animaciones se manejan generalmente con CSS o JavaScript. Usando animaciones CSS, podemos recrear nuestra etiqueta blink con unas pocas líneas y volver al negocio.
Con el siguiente CSS:
.blink { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } Puede agregar la .blinkclase a cualquier elemento HTML para que parpadee.
blink-182
Modernizando la etiqueta blink
Estamos en 2020, ¿y si quisiéramos algo un poco más suave?
Bueno, para empezar, podemos hacer que la animación se desvanezca eliminando stepsde las definiciones de animación.
.blink { animation: blink 1s infinite; } 
¿O qué pasaría si quisiéramos que se desvaneciera como un efecto de ciencia ficción?
.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; color: blue; } } 
O incluso un bonito efecto de crecimiento y desvanecimiento.
.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; transform: scale(2); } 51% { opacity: 0; transform: scale(0); } 100% { transform: scale(1); opacity: 1; } } 
Tomando el control de las animaciones con CSS
Aunque es posible que no pueda usar la etiqueta blink, todavía tiene muchas opciones. CSS proporciona un montón de opciones de animación de forma nativa, por lo que si desea recrear su pasatiempo HTML favorito o recrear la secuencia de títulos de Alien, las posibilidades son prácticamente infinitas.
- ? Sigueme en Twitter
- ? ️ Suscríbete a mi Youtube
- ✉️ Suscríbete a mi boletín