web-dev-qa-db-fra.com

Comment faire clignoter une image?

Je me demandais comment faire clignoter une image en CSS, si c'est possible. Je veux qu'il clignote où il est.

J'aimerais aussi changer la vitesse mais surtout je veux la faire clignoter.

htmlcssimageblink
11
user1623495

Des animations CSS à la rescousse!

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

http://jsfiddle.net/r6dje/

Vous pouvez en faire un clin d'œil en ajustant les intervalles:

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

http://jsfiddle.net/xtJF5/1/

48
Waleed Khan

Vous pouvez le faire avec CSS facilement. Ajoutez simplement le code de navigateur croisé ci-dessous dans l'élément CSS de votre image. Vous pouvez également définir le timing si vous modifiez le chiffre dans le code.

-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out; 
-ms-animation:blink normal 2s infinite ease-in-out; 
animation:blink normal 2s infinite ease-in-out;
1
user1874941

utiliser la méthode setInterval de Javascript, l'utiliser comme référence de W3Schools puis changer le CSS de visibility:visible à visiblity:hidden nous n'utiliserons pas display:none car cela supprimera également l'espace de l'image, mais nous avons besoin de l'espace pour que l'image clignote.

1
Dhruvenkumar Shah