Déplacement horizontalement d'une image

**vegnagun** · 03/05/2012, 21h31

Bonsoir à tous !

Je voudrait savoir si c'est possible de déplacer une image horizontalement de façon constante et continuellement en utilisant le CSS3.
En cherchant un peu, je tombe tout le temps sur transform:translate(...), mais cela ne correspond pas à ce que je souhaite, à moins que je l'utilise mal bien sûr.

Je pense que cela doit être possible en utilisant le CSS3, car je ne souhaite pas utiliser le JavaScript.

Merci d'avance de votre aide.

Cordialement,
vegnagun

Invité · 03/05/2012, 22h11

Bonjour,
=> W3C : CSS Animations
=> Les transformations en CSS3

A tester :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* -------------------------------------- */
/* ANIMATION : TRANSLATION */
@keyframes mouvement-uniforme {
    0% 		{ animation-timing-function: linear; transform: translateX(-50px); }
    100% 	{ animation-timing-function: linear; transform: translateX(1050px); }
}
@-webkit-keyframes webkit-mouvement-uniforme {
    0% 		{ -webkit-animation-timing-function: linear; -webkit-transform: translateX(-50px); }
    100% 	{ -webkit-animation-timing-function: linear; -webkit-transform: translateX(1050px); }
}
@-moz-keyframes moz-mouvement-uniforme {
    0% 		{ -moz-animation-timing-function: linear; -moz-transform: translateX(-50px); }
    100% 	{ -moz-animation-timing-function: linear; -moz-transform: translateX(1050px); }
}
@-ms-keyframes ms-mouvement-uniforme {
    0% 		{ -ms-animation-timing-function: linear; -ms-transform: translateX(-50px); }
    100% 	{ -ms-animation-timing-function: linear; -ms-transform: translateX(1050px); }
}
@-o-keyframes o-mouvement-uniforme {
    0% 		{ -o-animation-timing-function: linear; -o-transform: translateX(-50px); }
    100% 	{ -o-animation-timing-function: linear; -o-transform: translateX(1050px); }
}
 
#bouge		{ color:#3366cc;/*bleu */ font-size:1.2em; 
	animation: mouvement-uniforme 10s infinite;
	-webkit-animation: webkit-mouvement-uniforme 10s infinite;
	-moz-animation: moz-mouvement-uniforme 10s infinite;
	-ms-animation: ms-mouvement-uniforme 10s infinite;
	-o-animation: o-mouvement-uniforme 10s infinite;
			}
#conteneur { background:yellow; overflow:hidden; margin:0 auto; width:1000px; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body>
 
<div id="conteneur"><span id="bouge">coucou !</span></div>
 
</body>

Le fonctionnement ressemble à la balise <marquee> (dépréciée)
PS : j'ai mis le texte "coucou !", mais on peut mettre aussi une image, ou autre chose...

Et pour faire des allers-retours :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@-moz-keyframes moz-mouvement-uniforme {
    0% 		{ -moz-animation-timing-function: linear; -moz-transform: translateX(-50px); }
    50% 	{ -moz-animation-timing-function: linear; -moz-transform: translateX(1050px); }
    100% 	{ -moz-animation-timing-function: linear; -moz-transform: translateX(-50px); }
}