CSS3過渡問題

Question

所以我在過渡上無法正常工作，在懸停上可以切換圖像，並且我在另一個站點上使用了此過渡，並且在同一台機器和瀏覽器上使用時效果很好，但是我正在此站點上構建過渡沒有它。...這是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

這對我來說很好用： 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;
}​

注意我簡化了CSS並擺脫了多余的屬性聲明。