Html 使用css3精灵进行转换

我只想使用css3淡入淡出图像（精灵）。下面的代码提供所有图像的过渡。请帮助我在css精灵中淡入淡出下面的图像

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转换的完整说明。

（从连杆上方拨叉）

HTML

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

---

嗯，你能再解释一下吗！我要点击而不是悬停！使用

：active

而不是

：hover

。

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

.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;
}