Discussion :

[Invité]

hello tout le monde, comment allez vous ?

j'ai voulu suivre un exemple sur internet qui montrait comment animé une image d'arrière plan en css.
mais le soucis c'est que mon image ne bouge pas
voici le code css:

Code :

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
@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
 
#animate-area {
background: #f5f0e0 url(../images/noise3.png);
background-position: 0px 0px;
background-repeat: repeat-y;
animation: animatedBackground 40s linear infinite;
border: 5px solid #7FD0A1;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0px 0px 70px #000000;
-webkit-box-shadow: 0px 0px 70px #000000;
box-shadow: 0px 0px 70px #000000;
 
}

savez vous pourquoi l'image ne bouge ?
merci d'avance

[rodolphebrd]

Bonjour,

N'avez-vous pas oublié les préfixes ?

[Invité]

un préfixe c'est a dire un webkit ?
j'utilise chrome pour tester et dans l'exemple il montrait que se bout de code avec une démo qui fonctionnait très bien
voila le site en question http://davidwalsh.name/background-animation-css

[rodolphebrd]

Ben un préfixe comme ça :

Code :

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
@keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-webkit-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-ms-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-moz-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
#animate-area {
width: 560px;
height: 400px;
background-image: url(http://davidwalsh.name/demo/bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}

http://codepen.io/anon/pen/lmItL

[Bovino]

il montrait que se bout de code avec une démo qui fonctionnait très bien

Tu as probablement oublié de lire le texte correspondant au code, notamment la partie :

Of course the mess of vendor prefixes to accomplish the animation sucks

Certes, pour des raisons de concision, l'article n'intègre pas les préfixes vendeurs, mais il est quand même indiqué de les utiliser ! Sans parler du code source de la démo où ils apparaissent clairement.

[Invité]

j'ai rajouté se qu'il manquait l'image bouge mais de façon horizontale, de droite a gauche. moi je voulait que l'animation fait de haut en bas, en vertical
alors j'ai trouvé cette exemple: http://debray-jerome.developpez.com/...tions-en-css3/

mais sa ne marche pas l'image ne bouge pas

faut il remplacer animated par translate ?

[rodolphebrd]

Il faut changer les valeurs des background-position dans les keyframes et mettre un repeat-y :

Code :

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
@keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}
		@-webkit-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}
		@-ms-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}
		@-moz-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}
#animate-area {
width: 560px;
height: 400px;
background-image: url(http://davidwalsh.name/demo/bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-y;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}

http://codepen.io/anon/pen/umcIk

Bien sûr avec l'image adéquat se sera mieux. ^^

[Invité]

voici mon nouveau code:

Code :

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
32
33
}
@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 0 100%; }
}
@-webkit-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}
@-ms-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}
@-moz-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}
 
#animate-area {
background: #f5f0e0 url(../images/noise3.png);
background-position: 0px 0px;
background-repeat: repeat-y;
    animation: animatedBackground 5s linear infinite;
    -ms-animation: animatedBackground 5s linear infinite;
	-moz-animation: animatedBackground 5s linear infinite;
	-webkit-animation: animatedBackground 5s linear infinite;
border: 5px solid #7FD0A1;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0px 0px 70px #000000;
-webkit-box-shadow: 0px 0px 70px #000000;
box-shadow: 0px 0px 70px #000000;

effectivement merci, l'image bouge bien de haut en bas mais elle se répète a chaque fois et on aperçois une coupure, il faudrait peut être que j'agrandisse l'image du background pour quelle soit 10 fois plus grande, pour que l'animation bouge un peu plus longtemps.

je ne sais pas si background-position: 0px 0px; sert bien a quelle que chose maintenant