CSS3背景圖像懸停過渡

Question

請查看以下鏈接

http://intelmarketing.mk/demos/security/services/

你會看到3個圖標IA行和有幾乎所有的徘徊CSS3過渡，但我不能動畫添加到圖標我試圖像

http://css3.bradshawenterprises.com/cfimg/幾個例子 - 比如1

但沒有接縫也是我的圖像是透明的，因此例如1不工作，我要工作，所以我想是時候ID o將鼠標懸停在框上的按鈕和圖標同時順利懸停，按鈕的作品，但圖標不怎麼能解決這個問題？

CSS第一個圖標：

.fastvagticon 
{ 
    width:299px; 
    height:166px; 
    margin:0 auto; 
    background-image:url('images/FASTVAGT.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
} 

.servbox:hover .fastvagticon 
{ 
    width:299px; 
    height:166px; 
    background-image:url('images/FASTVAGTh.png'); 
    background-repeat:no-repeat; 
    margin-top:0px; 
} 

CSS的按鈕

.servbtn1 
{ 
    background-color:transparent; 
    background-position: right center; 
    background-image: url("images/eempy.png"); 
    background-repeat: no-repeat; 
    color: #FFFFFF; 
    height: 34px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 35px; 
    padding-top: 8px; 
    text-align: left; 
    width: 151px; 
     -webkit-transition: all 1s ease; 
     -moz-transition: all 1s ease; 
     -ms-transition: all 1s ease; 
     -o-transition: all 1s ease; 
     transition: all 1s ease; 
     border:1px solid #fff; 
} 

.servbox:hover .servbtn1 
{ 
    width:184px; 
    height:34px; 
    background-color:#3E1C1E; 
    background-repeat: no-repeat; 
    color: #FFFFFF; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 35px; 
    padding-top: 8px; 
    text-align: left; 
    width: 151px; 
} 

Answer 1

你是不是增加了圖標的過渡：

.fastvagticon 
{ 
    width:299px; 
    height:166px; 
    margin:0 auto; 
    background-image:url('images/FASTVAGT.png'); 
    background-repeat:no-repeat; 
    background-position:center; 

    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

而且，我不不知道你是否知道，但這不會在Firefox中工作。 Firefox不允許任何動畫背景圖像。