multi color transition

Version imprimable

12/11/2013, 15h58
Invité

multi color transition
bonjour a tousse
me revoilà et j'ai une nouvelle colle a poser;)
en 1er je voulait savoir si c'était possible en css avant de faire sa en JS

voici le problème:
j'ai fait un petit cadre de se genre la:
Code:

1 2 3 4 5 6 7 8 .modernUI { float: left; margin-left: 5px; background-color: #DD9191; width: 100px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px;
et je voudrait faire une transition pour qu'il change de couleur automatiquement.
par exemple au bout de 2s il change en bleu puis rouge puis vert etc.. et qu'il recommence pour former une boucle.
est ce que sais possible ? et comment faire se genre d'animation ?
12/11/2013, 16h06
Bovino

Tu peux utiliser les animations CSS3 (voir par exemple Une animation de chargement en CSS3 ou Créez une animation de chargement avec CSS3) mais la compatibilité n'est pas parfaite.

merci bovino
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.modernUI {
	float: left;
	margin-left: 5px;
	background-color: #DD9191;
	width: 100px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	-moz-animation: fadecolor 5s 1s infinite;
		  -webkit-animation: fadecolor 5s 1s infinite;
		  -ms-animation: fadecolor 5s 1s infinite;
		  animation: fadecolor 5s 1s infinite;
}
       @-moz-keyframes fadecolor
		{
			100% {background-color: #D68182;}
			100%{background-color: #E0B081;}
			100%{background-color: #D9D183;}
			100%{background-color: #B8D27C;}
			100%{background-color: #96CD75;}
		}
 
		@-webkit-keyframes fadecolor
		{
			100% {background-color: #D68182;}
			100%{background-color: #E0B081;}
			100%{background-color: #D9D183;}
			100%{background-color: #B8D27C;}
			100%{background-color: #96CD75;}
		}
 
		@-ms-keyframes fadecolor
		{
			100% {background-color: #D68182;}
			100%{background-color: #E0B081;}
			100%{background-color: #D9D183;}
			100%{background-color: #B8D27C;}
			100%{background-color: #96CD75;}
		}		
 
		@keyframes fadecolor
		{
			100% {background-color: #D68182;}
			100%{background-color: #E0B081;}
			100%{background-color: #D9D183;}
			100%{background-color: #B8D27C;}
			100%{background-color: #96CD75;}
}

cependant les couleurs change mais en dégradé, j'aurait voulu quelle change sans aucune animation juste une simple transition
je crois qu'il faut changer en haut du code animation par une transition