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
<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
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!