Article original : Make It Blink HTML Tutorial – How to Use the Blink Tag, with Code Examples

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

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

Image Recherche Google de "blink tag"

Cela, ainsi que d'autres balises obsolètes comme la balise marquee (<marquee>), étaient un moyen facile d'ajouter des effets d'animation simples à votre site.

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

Par exemple, si vous vouliez que le mot "blink" dans blink-182 clignote, vous écriviez le HTML suivant :

<p>
  <blink>blink</blink>-182
</p>

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

Image Compatibilité des navigateurs avec la balise blink

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

_Note : la balise Blink a été dépréciée en raison de problèmes d'accessibilité. Veuillez faire vos recherches avant d'essayer d'utiliser une solution qui fournit le même effet, car nous devrions tous faire un effort pour rendre nos projets aussi inclusifs que possible._

Dans le monde du développement web d'aujourd'hui, les animations sont généralement gérées avec CSS ou JavaScript. En utilisant les animations CSS, nous pouvons recréer notre balise blink avec quelques lignes et être de retour en affaires.

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 classe .blink à n'importe quel élément HTML pour le faire clignoter.

<p>
  <span class="blink">blink</span>-182
</p>

Image Effet de clignotement HTML CSS

Nous sommes en 2020, que se passerait-il si nous voulions quelque chose de plus fluide ?

Pour commencer, nous pouvons faire en sorte que l'animation s'estompe en supprimant les steps des définitions d'animation.

.blink {
  animation: blink 1s infinite;
}

Image Effet de fondu clignotant

Ou que se passerait-il si nous voulions le faire s'estomper comme un effet de science-fiction ?

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

Image Effet de fondu clignotant CSS sci-fi

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

Image Effet de croissance et de fondu clignotant CSS

Prendre le contrôle des animations avec CSS

Bien que vous ne puissiez peut-être pas utiliser la balise blink, vous avez toujours beaucoup d'options. CSS offre 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 titre d'Alien, les possibilités sont virtuellement illimitées.