Slide background color transition - html

Question

I found this example from a thread here in stackoverflow.
aosgibmoa bnocibnas
a{
display:inline-block;
background:#fff;
position:relative;
padding:2px 5px;
background:-webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-size:200% 100%;
background-position:0 0;
-webkit-transition:background-position .3s ease-out;
}
a:hover{
background-position:100% 0;
}
http://jsfiddle.net/nsfxE/1/
But I'm not sure how to change the -webkit-gradient to other vendor prefix and the normal standard one.
I want to make sure that it is somewhat modern cross browser compatible.

Answer 1

background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: -moz-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: -o-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
I hope this is what you want.

Answer 2

Well, I tried out and this is my answer. Hope this can be a reference to whoever is needed.
a{
display:inline-block;
background:#fff;
position:relative;
padding:2px 5px;
background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #000));
background:-webkit-linear-gradient(left, #fff 50%, #000 50%);
background:-moz-linear-gradient(left, #fff 50%, #000 50%);
background:linear-gradient(to right, #fff 50%, #000 50%);
background-size:200% 100%;
background-position:0 0;
-webkit-transition:background-position .3s ease-out;
-moz-transition:background-position .3s ease-out;
transition:background-position .3s ease-out;
}
a:hover{
background-position:-100% 0;
}
http://jsfiddle.net/nsfxE/215/
Now it should work in most modern browsers.
I never put Opera prefix because I tried that and it doesn't work. Standard syntax works just fine on Opera.