CODEWITHSUNDEEP
htmlcssimageblink
user1623495
user1623495

Reputation: 151

How do you make an image blink?

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.

Upvotes: 14

Views: 91424

Answers (3)

user1874941
user1874941

Reputation: 3153

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;

Upvotes: 1

Waleed Khan
Waleed Khan

Reputation: 11467

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/

Upvotes: 60

Dhruvenkumar Shah
Dhruvenkumar Shah

Reputation: 528

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.

Upvotes: 1

Related Questions