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

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.