<div id="slider">
                                    <div id="contenu">
                                                <div class="image">
                                                      <img src="tn image" width="100%" height="100%"/>
                                                </div>

 												<div class="image">
                                                      <img src="tn image" width="100%" height="100%"/>
                                                </div>

 												<div class="image">
                                                      <img src="tn image" width="100%" height="100%"/>
                                                </div>

 												<div class="image">
                                                      <img src="tn image" width="100%" height="100%"/>
                                                </div>

                                    </div>
                            </div>




#slider{
overflow: hidden;
width: 100%;
height: 40%;
}

#contenu{
width: 100%;
height: 300px;
animation-name: diapo;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

.image {
   position: relative;
}