Didacticiel Make It Blink HTML - Comment utiliser la balise Blink, avec des exemples de code

Dans les premiers temps du Web, les éléments HTML comme la balise blink étaient des moyens natifs d'ajouter des effets d'animation pour animer une page Web. Comment pouvons-nous utiliser ces animations aujourd'hui pour ajouter de l'éclat à nos sites Web et applications?

  • Qu'est-ce que la balise HTML clignote?
  • Comment utilisez-vous la balise clignotante?
  • Pouvez-vous toujours utiliser la balise clignotante?
  • Recréer la balise clignotante avec des animations CSS

Qu'est-ce que la balise HTML clignote?

La balise blink ( ) est une balise HTML obsolète qui fait clignoter lentement le contenu de cette balise.

Ceci, avec quelques autres balises obsolètes comme la balise de sélection ( ), était un moyen facile d'ajouter des effets d'animation simples à votre site.

Comment utilisez-vous la balise clignotante?

Étant donné que la balise blink était un simple élément HTML, vous l'utiliseriez en ligne avec votre contenu.

Par exemple, si vous vouliez que le mot «blink» dans blink-182 clignote, vous écririez le code HTML suivant:

blink-182

Pouvez-vous toujours utiliser la balise clignotante?

Comme vous l'avez peut-être remarqué dans le gif ci-dessus, cette balise est obsolète.

Cela signifie que vous ne pouvez pas utiliser la balise HTML blink elle-même. Cependant, cela ne devrait pas nous empêcher de le refaire dans toute sa splendeur clignotante.

Remarque: la balise Blink est obsolète en raison de problèmes d'accessibilité. Veuillez faire vos recherches avant d'essayer d'utiliser une solution qui offre le même effet, car nous devrions tous faire un effort pour rendre nos projets aussi inclusifs que possible.

Recréer la balise clignotante avec des animations CSS

Dans le monde du développement Web d'aujourd'hui, les animations sont généralement gérées avec CSS ou JavaScript. À l'aide d'animations CSS, nous pouvons recréer notre balise clignotante avec quelques lignes et reprendre les activités.

Avec le CSS suivant:

.blink { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } 

Vous pouvez ajouter la .blinkclasse à n'importe quel élément HTML pour le faire clignoter.

blink-182

Modernisation de la balise clignotante

Nous sommes en 2020, et si nous voulions quelque chose d'un peu plus doux?

Eh bien pour commencer, nous pouvons faire disparaître l'animation en supprimant les stepsdéfinitions d'animation.

.blink { animation: blink 1s infinite; } 

Ou si nous voulions le faire disparaître comme un effet de science-fiction?

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; color: blue; } } 

Ou même un bel effet de croissance et de fondu.

.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; } } 

Prendre le contrôle des animations avec CSS

Bien que vous ne puissiez pas utiliser la balise clignotante, vous avez encore beaucoup d'options. CSS fournit une tonne d'options d'animation de manière native, donc que vous souhaitiez recréer votre passe-temps HTML préféré ou recréer la séquence de titres Alien, les possibilités sont pratiquement infinies.

Suivez-moi pour plus de Javascript, UX et d'autres choses intéressantes!

  • ? Suis moi sur Twitter
  • ? ️ Abonnez-vous à mon Youtube
  • ✉️ Inscrivez-vous à ma newsletter