CSS3 Issue with transition

Question

So I am having trouble getting the transition to work here, on hover works to switch the images, and I have used this transition another site and works just fine when used on the same machine and browser however on this site I am building currently the transition is not having it.... Here is the HTML& CSS

<div class="grid_4">
<h3 class="foot">
Say Hello! 
</h3>
<h3 class="descripfoot">
<div class="grid_2">
<a class="testicon" title="flickr Link" align="left" href="http://www.flickr.com"></a>
</div>
    some description text goes hereeeee

</h3>
</div>


a.testicon
{
    background: url("../images/testicon.png");
    width:140px;
    height: 140px;
    border-radius: 7px 7px 7px 7px;
    display: inline-block;

 }

a.testicon:hover,a.testicon:focus,a.testicon:active
{
width:140px;
height: 140px;
    border-radius: 7px 7px 7px 7px;
    display: inline-block;
   -webkit-transition: background .3s linear 0s;
-moz-transition: background .3s linear 0s;
background: url("../images/testicon2.png");
}

Answer 1

This works fine for me: http://jsfiddle.net/LWsVt/2/

a.testicon
{
    background: url(http://lorempixel.com/200/200) center center no-repeat;
    background-size: 200px 200px;
    width:140px;
    height: 140px;
    border-radius: 7px 7px 7px 7px;
    display: inline-block;
    -webkit-transition: background .3s linear 0s; /* obviously declare all vendor prefixes here */
 }

a.testicon:hover,a.testicon:focus,a.testicon:active
{
    background-image: url(http://lorempixel.com/400/400);
    outline:none;
}​

Note I simplified the CSS and got rid of redundant property declarations.