Wie lässt sich ein Bild blinken?

Question

Ich frage mich, wie man ein Bild in CSS blinken lässt, wenn es möglich ist. Ich möchte es blinken lassen, wo es ist.

Ich möchte auch die Geschwindigkeit ändern, aber hauptsächlich möchte ich es blinken lassen.

Answer 1

Verwendung setInterval Methode von Javascript als Referenz von W3Schools verwenden und dann die von visibility:visible zu visiblity:hidden css ändern wir nicht display:none verwenden, da sie den Raum des Bildes als auch entfernen, aber wir tun den Raum für das Bild benötigen damit das blinkende Ding funktioniert.

Answer 2

CSS Animationen zur Rettung!

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

http://jsfiddle.net/r6dje/

Sie können es eine scharfe Blinken bringen, indem die Intervalle anzupassen:

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

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

Answer 3

Sie es leicht mit CSS zu tun. Fügen Sie einfach den folgenden Browser-Code in das CSS-Element Ihres Bildes ein. Sie können auch das Timing einstellen, wenn Sie die Ziffer im Code ändern.

-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;