animate background css

Version imprimable

hello tout le monde,:salut: 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:

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:ccool:

26/08/2013, 00h56
rodolphebrd

Bonjour,

N'avez-vous pas oublié les préfixes ?
26/08/2013, 14h32
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

Ben un préfixe comme ça :

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
@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

26/08/2013, 15h17
Bovino

Citation:

Envoyé par Morpheus500

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 :

Citation:

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

:roll:

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.
26/08/2013, 18h00
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 ?

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

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
@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. ^^

voici mon nouveau code:

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
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