Discussion :

[Invité]

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 :

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

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 ?

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

[Invité]

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