[Résolu] Animation css

Salut tout le monde, j'aurais besoin d'aide sur une animation que j'essai de reproduire.
Voici ce que je voudrait reproduire
http://www.youtube.com/watch?v=bgADRjKZjZE

Il faudrait que ce soit en css bien sur.
Merci d'avance, je voudrai juste un coups de pouce pour la base apres je pourrai finir moi meme.

Au passage bravo pour ce sit que je lit souvent
Modifié par kelkun89 (16 Oct 2010 - 01:07)

Hello,
Que veux tu réaliser en fait et avec quelle(s) interaction(s)?

Si c'est juste un slider automatique, en CSS, c'est faisable mais :
- moteur Webkit uniquement.
- lecture en boucle possible impossible. Par contre, il est possible de revenir au debut et de relancer l'anim.

Si tu veux des interactions, il faut utiliser un peu de javascript...

Du coup, j'ai fait un petit test ici: http://www.css3create.com/Slider-Galerie-photos-en-CSS

N'hésites pas si tu as des questions
Modifié par vdo93 (13 Oct 2010 - 16:19)

Salut et merci de m'aide
Il y a des chose que je n'ai pas compris qu'appelle tu une interaction ?

Apres ce que tu a fait est parfait, tu a fait sa qu'avec du css ou il y a du java dedan

je vais te mettre un morceau de codage css dune anim defilante pour que tu vois de quoi je parle.

@-webkit-keyframes image {

	0% {opacity: 0.1; -webkit-transform:translateX(-22px);}
	10% {opacity: 0.2; -webkit-transform:translateX(3px);}
	20% {opacity: 0.4; -webkit-transform:translateX(28px);}
	30% {opacity: 0.6; -webkit-transform:translateX(53px);}
	40% {opacity: 0.8; -webkit-transform:translateX(77px);}
	50% {opacity: 1.0; -webkit-transform:translateX(102px);}
	60% {opacity: 0.8; -webkit-transform:translateX(127px);}
	70% {opacity: 0.6; -webkit-transform:translateX(151px);}
	80% {opacity: 0.4; -webkit-transform:translateX(176px);}
	90% {opacity: 0.2; -webkit-transform:translateX(201px);}
	100% {opacity: 0.1; -webkit-transform:translateX(322px);}
	
	

}  




#image_1

{
	position: absolute;
	top: 150px;
	left: -10px;
	width: 120px; 
	height: 150px;	
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(transparent), color-stop(0.1, black), color-stop(0.9, black));
	-webkit-transform:translateX(392px);
	-webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.8, transparent), to(white));	
	-webkit-animation-name: image;
    -webkit-animation-duration: 6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	overflow: hidden;
	opacity: 0.0;
	z-index: 5;

	
	
}

Voila ce que j'ai bricoler pour faire un defilement mais sa na pas le meme rendu bien sur.

Une interaction concerne le client, hover ,click...par exemple tu pourrais creer bouton droit, bouton gauche est faire defiler.

Pour mon exemple, oui je n'ai utilisé que du css, d'ailleurs tous les exemples de mon site n'utilise pas javascript.

Sinon j'ai sensiblement le meme code que toi. J'utilises un ul que je deplace de la taille d'un li toutes les n secondes.
Regardes dans mon fichier css3.css, vers la fin au niveau des commentaires : article8.

Ok merci pour l'info, il me faudrait sans interaction vu que je fait sa pour mon iphone. A moin de pouvoir faire sa avec le tactile mais la sa doit demande plus de codage je pense.
Par contre j'ai pas réussi a trouver ton css3.css et si tu pourrait me donner ton codage css pour le défilement sa serai énormément gentil de ta part.
Et si sa te derange pas j'aimerais garder contact avec toi pour echanger nos connaissance

Voila mon code:

ul{width:1800px;margin-left:25%;-webkit-animation:anim 20s ease 0s infinite;}
ul li{float:left;width:300px;height:300px;list-style:none;}

@-webkit-keyframes anim{
from {-webkit-transform:translateX(0);}
14%{-webkit-transform:translateX(0);}
16%{-webkit-transform:translateX(-300px);}
30%{-webkit-transform:translateX(-300px);}
32%{-webkit-transform:translateX(-600px);}
46%{-webkit-transform:translateX(-600px);}
48%{-webkit-transform:translateX(-900px);}
62%{-webkit-transform:translateX(-900px);}
64%{-webkit-transform:translateX(-1200px);}
78%{-webkit-transform:translateX(-1200px);}
80%{-webkit-transform:translateX(-1500px);}
96%{-webkit-transform:translateX(-1500px);}
to{-webkit-transform:translateX(0px);}
}  

La seule différence avec ton code est que je temporise l'animation...

A+
Modifié par vdo93 (13 Oct 2010 - 21:49)

Merci mais la j'ai des lacune sur ton codage.
le " ul " et " ul li " je connait pas et la premiere et derniere ligne de l'animation
from {-webkit-transform:translateX(0);}
to{-webkit-transform:translateX(0px);}
tu peux me l'expliquer ?
et comment tu la temporise parce que moi aussi je la temporise je comprend pas trop la.
Modifié par kelkun89 (13 Oct 2010 - 22:06)

Tu me fais peur
ul c'est une liste a puce, li un element de cette liste...

from et to sont des mots clés pour 0% et 100%.

Quand je dis que je temporise, c'est que de 0 à 14%, rien ne bouge puis de 14 à 16% je deplace le ul, puis plus rien ne bouge et ainsi de suite...

OK merci pour tout et desole mais mes connaissance sont plus baser pour l'iphone donc les liste de puce je m'en sert jamais.
Je vais regler ton codage pour que sa aille, je te tiens au courant.

Merci encore

Les listes a puces n'ont rien a voir avec la machine, c'est un element HTML qui permet de mettre en forme ton contenu.
Par exemple, un menu de navigation est une liste a puces composée de liens.

Tu devrais bosser le HTML peut etre avant de te lancer dans des animations en CSS.

Bon courage.

J'ai lu le html mais je me suis intéresser au élément qui me fallait en l'occurrence pour joindre mes image dans mes widget pour l'iphone je les insère dans une div tout simplement et dans mon css je fait tout le reste positionnement etc ....

merci pour c'est conseil.
Modifié par kelkun89 (13 Oct 2010 - 22:23)

Oups il y a un truk que j'ai oublie de te demande, ton codage tu met le meme sur tes X images?
Tu joue juste avec le temps de chaque anim par image pour rendre cette effet.
Je ferais des test demain pour voir sa
Modifié par kelkun89 (13 Oct 2010 - 22:31)

Relis bien. Je deplace le ul, pas les images!

Oaui donc en gros j'ai beaucoup a changer je me casserais la tete demain.
parce que moi c'est chaque image qui defile une a une.
regarde cette animation

@-webkit-keyframes kelkun89 {
    0% {
		opacity: 0.0;
		-webkit-transform:translateX(-35px);
    }
    3% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	7% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	10% {
		opacity: 0.0;
		-webkit-transform:translateX(35px);		
    }		
    100% {
		opacity: 0.0;
    }
}

#kelkun89 {
	position: absolute;
	left: 0px;
    top: 220px;
	width: 320px;
	height: 70px;
	background-color: transparent;
	opacity: 0.0;
	-webkit-animation-name: kelkun89;
	-webkit-animation-delay: 2s;
    -webkit-animation-duration: 25s;
	-webkit-animation-iteration-count: infinite;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(transparent), color-stop(0.1, black), color-stop(0.9, black));
	overflow: hidden;
}

@-webkit-keyframes lagunadub {
    0% {
		opacity: 0.0;
    }
    10% {
		opacity: 0.0;
		-webkit-transform:translateX(-35px);
    }	
    13% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	17% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	20% {
		opacity: 0.0;
		-webkit-transform:translateX(35px);		
    }		
    100% {
		opacity: 0.0;
    }
}

#lagunadub {
	position: absolute;
	left: 0px;
    top: 220px;
	width: 320px;
	height: 70px;
	background-color: transparent;
	opacity: 0.0;
	-webkit-animation-name: lagunadub;
	-webkit-animation-delay: 2s;
    -webkit-animation-duration: 25s;
	-webkit-animation-iteration-count: infinite;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(transparent), color-stop(0.1, black), color-stop(0.9, black));	
	overflow: hidden;
}

@-webkit-keyframes shadow {
    0% {
		opacity: 0.0;
    }
    20% {
		opacity: 0.0;
		-webkit-transform:translateX(-35px);
    }	
    23% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	27% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	30% {
		opacity: 0.0;
		-webkit-transform:translateX(35px);		
    }		
    100% {
		opacity: 0.0;
    }
}

#shadow {
	position: absolute;
	left: 0px;
    top: 220px;
	width: 320px;
	height: 70px;
	background-color: transparent;
	opacity: 0.0;
	-webkit-animation-name: shadow;
	-webkit-animation-delay: 2s;
    -webkit-animation-duration: 25s;
	-webkit-animation-iteration-count: infinite;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(transparent), color-stop(0.1, black), color-stop(0.9, black));	
	overflow: hidden;
}

@-webkit-keyframes zooropalg {
    0% {
		opacity: 0.0;
    }
    30% {
		opacity: 0.0;
		-webkit-transform:translateX(-35px);
    }	
    33% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	37% {
		opacity: 1.0;
		-webkit-transform:translateX(0px);
    }
	40% {
		opacity: 0.0;
		-webkit-transform:translateX(35px);		
    }		
    100% {
		opacity: 0.0;
    }
}


#zooropalg {
	position: absolute;
	left: 0px;
    top: 220px;
	width: 320px;
	height: 70px;
	background-color: transparent;
	opacity: 0.0;
	-webkit-animation-name: zooropalg;
	-webkit-animation-delay: 2s;
    -webkit-animation-duration: 25s;
	-webkit-animation-iteration-count: infinite;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(transparent), color-stop(0.1, black), color-stop(0.9, black));
	overflow: hidden;
}

Je verais sa demain je te tien au courant allez bonne soiree et encore merci

Effectivement, ca fait beaucoup de code...
Bon boulot!

Merci je teste sa demain et je vais meme essaye a ta facon qui c'est je peux peu etre le faire comme toi je verrais sa

En tout cas merci pour tout.

Salut bon voila j'ai fait un premier test qui n'est pas trop concluant.
voila le codage

@-webkit-keyframes image1 {
    0% {
		-webkit-transform:translateX(0px);
    }
    1% {
		-webkit-transform:translateX(70px);
    }
	2% {
		-webkit-transform:translateX(70px);
    }
    3% {
		-webkit-transform:translateX(275px);
    }
    7% {
		-webkit-transform:translateX(275px);
    }
    8% {
		-webkit-transform:translateX(475px);
    }
	9% {
		-webkit-transform:translateX(475px);		
    }	
    10% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image1 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image1;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}

@-webkit-keyframes image2 {
    0% {
		-webkit-transform:translateX(0px);
    }
    10% {
		-webkit-transform:translateX(70px);
    }
	12% {
		-webkit-transform:translateX(70px);
    }
    13% {
		-webkit-transform:translateX(275px);
    }
    17% {
		-webkit-transform:translateX(275px);
    }
    18% {
		-webkit-transform:translateX(475px);
    }
	19% {
		-webkit-transform:translateX(475px);		
    }	
    20% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image2 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image2;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}


@-webkit-keyframes image3 {
    0% {
		-webkit-transform:translateX(0px);
    }
    20% {
		-webkit-transform:translateX(70px);
    }
	22% {
		-webkit-transform:translateX(70px);
    }
    23% {
		-webkit-transform:translateX(275px);
    }
    27% {
		-webkit-transform:translateX(275px);
    }
    28% {
		-webkit-transform:translateX(475px);
    }
	29% {
		-webkit-transform:translateX(475px);		
    }	
    30% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image3 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image3;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}


@-webkit-keyframes image4 {
    0% {
		-webkit-transform:translateX(0px);
    }
    30% {
		-webkit-transform:translateX(70px);
    }
	32% {
		-webkit-transform:translateX(70px);
    }
    33% {
		-webkit-transform:translateX(275px);
    }
    37% {
		-webkit-transform:translateX(275px);
    }
    38% {
		-webkit-transform:translateX(475px);
    }
	39% {
		-webkit-transform:translateX(475px);		
    }	
    40% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image4 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image4;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}


@-webkit-keyframes image5 {
    0% {
		-webkit-transform:translateX(0px);
    }
    40% {
		-webkit-transform:translateX(70px);
    }
	42% {
		-webkit-transform:translateX(70px);
    }
    43% {
		-webkit-transform:translateX(275px);
    }
    47% {
		-webkit-transform:translateX(275px);
    }
    48% {
		-webkit-transform:translateX(475px);
    }
	49% {
		-webkit-transform:translateX(475px);		
    }	
    50% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image5 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image5;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}


@-webkit-keyframes image6 {
    0% {
		-webkit-transform:translateX(0px);
    }
    50% {
		-webkit-transform:translateX(70px);
    }
	52% {
		-webkit-transform:translateX(70px);
    }
    53% {
		-webkit-transform:translateX(275px);
    }
    57% {
		-webkit-transform:translateX(275px);
    }
    58% {
		-webkit-transform:translateX(475px);
    }
	59% {
		-webkit-transform:translateX(475px);		
    }	
    60% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}


#image6 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image6;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}



@-webkit-keyframes image7 {
    0% {
		-webkit-transform:translateX(0px);
    }
    60% {
		-webkit-transform:translateX(70px);
    }
	62% {
		-webkit-transform:translateX(70px);
    }
    63% {
		-webkit-transform:translateX(275px);
    }
    67% {
		-webkit-transform:translateX(275px);
    }
    68% {
		-webkit-transform:translateX(475px);
    }
	69% {
		-webkit-transform:translateX(475px);		
    }	
    70% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image7 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image7;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}



@-webkit-keyframes image8 {
    0% {
		-webkit-transform:translateX(0px);
    }
    70% {
		-webkit-transform:translateX(70px);
    }
	72% {
		-webkit-transform:translateX(70px);
    }
    73% {
		-webkit-transform:translateX(275px);
    }
    77% {
		-webkit-transform:translateX(275px);
    }
    78% {
		-webkit-transform:translateX(475px);
    }
	79% {
		-webkit-transform:translateX(475px);		
    }	
    80% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image8 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image8;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}


@-webkit-keyframes image9 {
    0% {
		-webkit-transform:translateX(0px);
    }
    80% {
		-webkit-transform:translateX(70px);
    }
	82% {
		-webkit-transform:translateX(70px);
    }
    83% {
		-webkit-transform:translateX(275px);
    }
    87% {
		-webkit-transform:translateX(275px);
    }
    88% {
		-webkit-transform:translateX(475px);
    }
	89% {
		-webkit-transform:translateX(475px);		
    }	
    90% {
		-webkit-transform:translateX(525px);		
    }			
    100% {
		opacity: 0.0;
		-webkit-transform:translateX(530px);		

    }
}



#image9 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image9;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}


@-webkit-keyframes image10 {
    0% {
		-webkit-transform:translateX(0px);
    }
    90% {
		-webkit-transform:translateX(70px);
    }
	92% {
		-webkit-transform:translateX(70px);
    }
    93% {
		-webkit-transform:translateX(275px);
    }
    97% {
		-webkit-transform:translateX(275px);
    }
    98% {
		-webkit-transform:translateX(475px);
    }
	99% {
		-webkit-transform:translateX(475px);		
    }	
    100% {
    	opacity: 0.0;
		-webkit-transform:translateX(525px);		
    }			
   
}


#image10 {
	position: absolute;
	left: -200px;
    top: 311px;
	width: 171px;
	height: 91px;
	-webkit-animation-name: image10;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	opacity: 1.0;
	overflow: hidden;
	z-index: 1;
}

Alors avec sa le probleme c'est que les image vont une a une donc j'ai pas le meme resulatat que toi donc pas celui que je veux.
Je me demande si il faut pas que je joue avec le temps de l'anim vu que je les ai tous caler a 60s faudrai mieu peu etre mettre la 1 a 60s, la 2 a 50s etc .
Apres il faut que je joue avec un retardement vu que toute les image se cale pareil.
Je sais pas si tout sa est bien clair lolll en tout cas je m'approche du but alors si tu a un conseil et comme tu a pu le voir j'ai pas teste avec une liste ordonner.

Bon probleme resolu

Je poste le codage pour ceux qui le veulent

<ul>
<li><span><img src='diapo/1.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/2.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/3.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/4.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/5.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/6.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/7.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/8.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/9.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/10.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/11.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/12.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
<li><span><img src='diapo/13.png' width='171' height='91' alt="" style='height:91px; width:171px;' /></span></li>
</ul>

@-webkit-keyframes diapo {

	0% {-webkit-transform:translateX(0px)}
	1% {-webkit-transform:translateX(0px)}
	10% {-webkit-transform:translateX(-205px)}
	11% {-webkit-transform:translateX(-205px)}
	20% {-webkit-transform:translateX(-410px)}
	21% {-webkit-transform:translateX(-410px)}
	30% {-webkit-transform:translateX(-615px)}
	31% {-webkit-transform:translateX(-615px)}
	40% {-webkit-transform:translateX(-820px)}
	41% {-webkit-transform:translateX(-820px)}
	50% {-webkit-transform:translateX(-1025px)}
	51% {-webkit-transform:translateX(-1025px)}
	60% {-webkit-transform:translateX(-1230px)}
	61% {-webkit-transform:translateX(-1230px)}
	70% {-webkit-transform:translateX(-1435px)}
	71% {-webkit-transform:translateX(-1435px)}
	80% {-webkit-transform:translateX(-1640px)}
	81% {-webkit-transform:translateX(-1640px)}
	90% {-webkit-transform:translateX(-1845px)}
	91% {-webkit-transform:translateX(-1845px)}
	99.99% {-webkit-transform:translateX(-2050px)}
	100% {-webkit-transform:translateX(0px)}
	
	
}



ul {

	position: absolute;
	top: 295px;
	left: -170px;
	width:3100px;
	-webkit-animation-name: diapo;
	-webkit-animation-delay: 0s;
    -webkit-animation-duration: 30s;
    -webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	
}


ul li{

	float:left;
	width:205px;
	height:91px;
	z-index: 1;
	list-style:none;
}

Un enorme merci a vdo93