html - 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.

Answer 1

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/