CSS- Transition not working

Question

Hello everyone I'm currently trying to do a transition when you hover the background turns purple and the text-color turns white.(originally there's no background color and the text-color is black...)

But it ain't working!

What is it that Im doing wrong!?

a:hover {
    color: white;
    -webkit-transition: color 1000ms linear;
    -moz-transition: color 1000ms linear;
    -o-transition: color 1000ms linear;
    -ms-transition: color 1000ms linear;
    transition: color 1000ms linear;
    background-color: purple;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

So///EDIT as everyone keeps telling me to add it on a instead of a:hover...

Initial state:

text-color:black;
background:none;

Hovered state:

Smooth Transition to:

 text-color:white;
background:black;

I hope this helps everyone out Thanks for your time!

Answer 1

Put them on the a (not the hover) AND if you want multiple transitions you have to declare them together.

-webkit-transition: color 1000ms linear, background-color 1000ms linear;

http://jsfiddle.net/4zhnP/1/