blinking image not blinking

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>

Hi there theremotedr,

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

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

coothead

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

Hi there theremotedr,

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

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

coothead

No problem.
Moving it got me sorted.

Thanks.

You're welcome. ;)

coothead