How do you make an image blink?

Question

I was wondering how to make an image blink in CSS, if it is possible. I want to have it blink where it is.

I would also like to change the speed but mainly I want to make it blink.

Don't think it's possible with just CSS but you could do it with Javascript. — Philip Kirkbride, Aug 24 '12 at 19:08
Could you explain "blink" a little more? Do you want to brighten the image for a instant, or turn it white, or a different color? — Cᴏʀʏ, Aug 24 '12 at 19:09
You can use CSS Animations and keyframes for this, but that might be a bit overkill for a simple blink. — uSeRnAmEhAhAhAhAhA, Nov 20 '13 at 10:01

score 59 · Answer 1 · answered Aug 24 '12 at 19:15

59

CSS animations to the rescue!

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

http://jsfiddle.net/r6dje/

You can make it a sharp blink by adjusting the intervals:

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

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

answered Aug 24 '12 at 19:15

Waleed Khan

11,426
6
39
70

If i hover, image wont blink. Any option? – KarSho Dec 16 '13 at 06:01
This is great, but it also needs code for Chrome browsers as well. – LauraNMS May 07 '14 at 15:12
1

You need also add cross-browser compability rules for `keyframes` (like `-moz-keyframes`, `-webkit-keyframes` etc.), `animation-iteration-count` (like `-moz-animation-iteration-count`, `-webkit-animation-iteration-count` etc.) and `animation` (`-moz-animation`, `-webkit-animation` etc). – 1_bug Jan 30 '17 at 10:18

score 1 · Answer 2 · answered Aug 24 '12 at 19:11

1

use setInterval method of Javascript use it as a reference of W3Schools and then change the css from visibility:visible to visiblity:hidden we will not use display:none as it will remove the space of the image as well but we do need the space for the image for the blinking thing to work.

answered Aug 24 '12 at 19:11

Dhruvenkumar Shah

520
2
10
26

BTW please create a formal account on SO. It is really helpful. Thanks. I hope my answer helps. – Dhruvenkumar Shah Aug 24 '12 at 19:12

score 1 · Answer 3 · answered May 31 '17 at 09:39

You can do it with CSS easily. Just add below cross browser code in the CSS element of your image. You can set also timing if you change the digit in the 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;

How do you make an image blink?

3 Answers3

Linked