Question: I have this PNG:

<http://imgur.com/DbVFiyW>

And I'm trying to make an animation with this png through CSS, I want the images to crossfade so it creates the illusion of only the petals fading in. For now the images do change correctly, but I have no idea how to make the new petals fade in. At this point I'll accept any approach with Javascript/jquery, although css only would be perfect.

This is my Code:

```
<!DOCTYPE html>
<html>

  <head>
    <title>CSS Sprite Animation</title>
  </head>
  <style type="text/css">
    #spriteContainer {
      width: 700px;
      height: 507px;
      display: block;
      background-image: url("karuna_animation.png");
      animation: sprite 3s steps(12) infinite;
    }

    @keyframes sprite {
     100% {
       background-position: -8520px;
     }
    }
  </style>

  <body>
    <div id="spriteContainer"></div>
  </body>

</html>

```

Answer: 
Maybe you could use several divs with different opacities?

```
.spriteContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 507px;
  display: block;
  background-image: url("http://i.imgur.com/DbVFiyW.png");
  animation: sprite 3s steps(12) infinite;
}

#spriteContainer1 {
  opacity: 0.3;
  animation-delay: 0.08s;
}

#spriteContainer2 {
  opacity: 0.6;
  animation-delay: 0.16s;
}

#spriteContainer3 {
  opacity: 1;
  animation-delay: 0.24s;
}

```

HTML:

```
<div id="spriteContainer1" class="spriteContainer"></div>
<div id="spriteContainer2" class="spriteContainer"></div>
<div id="spriteContainer3" class="spriteContainer"></div>

```

[jsfiddle](https://jsfiddle.net/bLwehr1z/1/)
Maybe a way to do the fadeIn is to cut your sprite as many pictures you have with petals and then use a function in jQuery to fade them ?

So you will have a structure like this :

```
<div id="spriteContainer">
  <img src="yourFirstPetal" alt="1st-petal" />
  <img src="yourSecondPetal" alt="2nd-petal" />
  <!-- and so on -->
</div>

```

And in CSS, you position your images in absolute position, one above the precedent one and play with `fadeIn()` and `fadeOut()` to show them with jQuery (or CSS but I don't know the method) ? 

[See an example of what I'm meaning here](https://jsfiddle.net/nqz196ra/4/)