Hi I would like to blink an image. There is a demo here. In my website it makes all the images blinking. I would like to blink only one certain image. Do you have any idea how to do that? Thanks.

Hi I would like to blink an image. There is a demo here. In my website it makes all the images blinking. I would like to blink only one certain image. Do you have any idea how to do that? Thanks.

• javascript
• html
• css

• can you provide your fiddle code for multiple images? – Nitesh Commented May 27, 2013 at 8:42
• no offense but this couldve been googled, easy.. – DiederikEEn Commented May 27, 2013 at 8:54

5 Answers 5

If you inspect it, the blinking is in the css:

-moz-animation: blink normal 2s infinite 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;

we can provide blinking image illusion through javascript coding by changing the display property of the image to block / none with periodic time intervals...

however, this will increase load at the client side as we need a script to run continously to blink an image...

i would prefer to prepare a GIF blinking image and place it on the website... ( if the requirements permits)

In the tutorial, the effect is set to every image on the page, because the "img" selector selects every image on the page.

img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-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;
/* order: name, direction, duration, iteration-count, timing-function */  
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}​

Use a class instead; replace img with .blink and add this class to your image:

<img src="..." class="blink" />

From the demo link that you have given, you can apply a class for images or multiple images that you want to blink or unblink.

Here is the Working fiddle for the same.

The HTML

<div>
<img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials./code/images/dont-blink.jpg">  
    <img class="abc" width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials./code/images/dont-blink.jpg">   
        <img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials./code/images/dont-blink.jpg">   
            <img width="350px" height="237px" alt="Don't Blink" src="http://www.websitecodetutorials./code/images/dont-blink.jpg">   
<div>

The CSS:

@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
img {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-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;
/* order: name, direction, duration, iteration-count, timing-function */   
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}​

img {
    animation: 2s ease-in-out 0s normal none infinite blink;
    border: 1px solid #000000;
    transition: all 1s ease-in-out 0s;
}

img.abc {
    animation: none;
    transition: none;
}

So by default all the images are blinking, you just need to apply class .abc (from this example) to unblink the images that you do not want to blink and vice-versa.

Hope this Helps.

As seen here: How do you make an image blink?

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

img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}