Transition using css3 sprites

Question

I want to just fade in and fade out the images(sprite) using css3..The below code gives transitions to all images.Help me to fade in and fade out the below images in a css sprite.

HTML CODE

 <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

Check this site, for a through explanation on how to achieve CSS transitions using image sprites.

DEMO (fork from above link)

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