Faire clignoter un élément en pur CSS

Voici une technique pure CSS pour faire clignoter un élément en utilisant les @keyframes qui permettent de définir un parcours d’animation des propriétés CSS.

Dans cet exemple j’ai joué sur l’opacité de l’image mais on peut aussi appliquer un clignotement sur la couleur d’un texte ou sur le background d’un <div>

Voir cet article : https://developer.mozilla.org/fr/docs/Web/CSS/@keyframes

Code HTML

<img class="image-clignote" src="../img/image1.jpg"/>

Code CSS

.image-clignote  {
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

On peut aussi mettre en place des systèmes de clignotement d’éléments en JQuery