Animation CSS

Bonjour,

En fait je cherche à faire une animation avec deux images.
Sauf que la deuxième image c'est un picto en png donc en fond transparent que j'ai mis dans un div avec un background gris.

<ul class="grid">
                <!-- début logistique -->
                <li>
                    <div class="lo-item lo-bcg">                
                        <div class="lo-wrap">
                            <div class="img-transition">
                            <!-- première image dans un div img-front-->
                                <div class="img-front">
                                    <img src="image/mainHulk.jpg" alt="hulk">
                                </div>

                                <!-- deuxième image dans un div img-back -->
                                <div class="img-back">
                                    <a href="">
                                        <img src="image/logistique.png" alt="logistique">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- fin logistique -->
</ul>

Ce que je veux

Ce que je veux en effet c'est de faire une animation entre les deux div "img-front" et "img-back".
Donc au début il y a l'image du div "img - front " qui s'affiche et juste quelques secondes après avec une transition l'autre image du div "img-back" s'affiche et reste là dessus.
Je veux juste une seule animation qui me permet de switcher vers l'image du div "img-back".

img-front : http://hpics.li/dd852f8
img-back : http://hpics.li/be5c122

Le soucis c'est que je ne sais pas comment m'y prendre en CSS pour faire l'animation.... Si vous pouvez m'aider SVP.

Cordialement