comment faire un clignotement de l'image en CSS3

Je suis nouveau sur le CSS3 et le travail sur un code CSS3 pour le clignotement des images. J'ai juste besoin de montrer une image avec elle clignote continuellement. Je ne peux pas utiliser une image GIF, puisque les images viennent de manière dynamique.

Vous devez inclure ce que vous avez essayé. Vous avez probablement besoin d'utiliser JavaScript avec des délais d'attente qui permet de changer la source de l'image. Assurez-vous de pré-charger les images avant de jouer.
ohh je suis bête... @Rameez rami : Merci pour la réponse

OriginalL'auteur | 2015-11-12

  1. 9

    c'est très simple... il suffit d'utiliser un CSS3 animation sur l'opacité de l'image

    J'espère que cela aide..

    ici est un travail de violon http://jsfiddle.net/rameezrami/27754r4f/1/ ou utiliser html suivant

    <html>
<head>
<style>
/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
.blink-image {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
</style>
</head>
<body>
<img class="blink-image" src="http://www.chicagoexcelclasses.com/wp-content/uploads/2014/04/css31-180x180.jpg">
</body>
</html>
    j'ai mis à jour le code pour tous la compatibilité du navigateur

    OriginalL'auteur Rameez Rami