使用css3 sprite的過渡

Question

我想淡入淡出使用css3的圖像（sprite）。下面的代碼給出了所有圖像的過渡。幫助我淡入和淡出css sprite中的下面的圖像。

HTML代碼

<div class="navigation"> 
    <div class="navigation1 process-normal" id="process"></div> 
    <div class="navigation1 works-normal" id="works"></div> 
    <div class="navigation1 team-normal" id="team"></div> 
    <div class="navigation1 products-normal" id="products"></div> 
    <div class="navigation1 services-normal" id="services"></div> 

CSS

.services-active, .products-active, .works-active, 
.process-normal, .process-active, .products-normal, .team-normal, .team-active, 
.works-normal,.brain,.static,.services,.people,.servies-normal 
{ display: block; background: url('allimages.png') no-repeat; } 
.navigation1 
{ 
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
transition: all 1s ease; 
} 

Answer 1

檢查這個site，對於通過解釋如何實現利用圖像精靈CSS過渡。

DEMO（叉從上面的鏈接）

HTML

<a href="#" class="arrow">Arrow<span></span></a> 

CSS

.arrow { 
    display: inline-block; 
    position: relative; 
    text-indent: -9999px; 
    width: 36px; 
    height: 36px; 
    background: url(sprites.png) no-repeat; 
} 

.arrow span { 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    background: url(sprites.png) no-repeat; 
    background-position: -50px 0; 
    opacity: 0; 
    -webkit-transition: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -o-transition:  opacity 0.5s; 
} 

.arrow:active span { 
    opacity: 1; 
}