[CSS 3] Déplacement horizontalement d'une image

Déplacement horizontalement d'une image

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

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

A tester :

Code:

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:

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:

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); }
}

Ah merci, le site sur le CSS : animations, c'est se qu'il me fallait :)
Ton code, marche très, je doit juste le modifier pour qu'il correspond à ce dont j'ai besoin, mais sinon, je te remercie de ton aide :) .
Le reste, je chercherais moi-même ;)

Je clos le sujet :)