blinking image not blinking

[theremotedr]

I have added this to the basic.css file

@-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 */

.blinking {
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 */
}​

Added class="blinking" to the image in question but image will not blink.

http://www.theremotedoctor.co.uk/kar...llto=selection

<h1><img src="m-images/advert-honda.jpg" alt="the remote doctor honda advert" id="mainImage" class="blinking" /></h1>

[coothead]

Hi there theremotedr,

there is something in the "basic.css" file that is preventing it from working.

Moving the it from the bottom to the top of the "basic.css" file corrects it.

coothead

[theremotedr]

Many thanks for finding the issue.
I have now put the code into another css file and all is working.

I dont suppose which css file it goes in matters does it ?

Taken from basic and put into normalize

[coothead]

Hi there theremotedr,

you may place it anywhere that seems appropriate, as long as it works of course.

Also note that I did not investigate the actual cause of the problem with your "basic.css" file.

coothead

[theremotedr]

No problem.
Moving it got me sorted.

Thanks.

[coothead]

You're welcome.

coothead