Discussion :

[JefReb]

Bonjour à tous,
Pour montrer une petite démo sur l'animation en css dans un club informatique de mon coin, j'ai fait un feu-rouge clignotant tout simple.
Mais je trouve que le passage du vert à l'orange se fait très très vite contrairement à l'orange et au rouge.

De plus, je pose la question si il est possible, et si oui, comment, est-il possible de désynchroniser les 3 temps.
Je veux dire par exemple 3 secondes pour le vert, 2s pour l'orange et 5s pour le rouge.
Bon c'est juste une interrogation

http://codepen.io/JefReb/pen/jBxZLd

Code css :

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
49
50
51
52
*   { box-sizing:border-box;}
.feu {
	width: 120px;
	height: 350px;
	margin-top:50px;
	background-color:#999;
	border-radius: 15px;
	border: 3px solid black;
}
.noir, .rouge, .orange, .vert {
	z-index:0;
	width: 100px;
	height: 100px; 
	border-radius: 50px;	
	}
.noir {
	margin:10px;
	background-color: black;
 
}
 
.rouge {
	position: relative;
	background-color:red;
	animation: rouge 5s infinite;	
}
.orange {
	position: relative;
	background-color:orange;
	animation: orange 5s infinite;
}
.vert {
	position: relative;
	background-color:green;
	animation: vert 5s infinite;
}
 
@keyframes vert { 
0%   { z-index:1;  }
50%  { z-index:-1;   } 
100% { z-index:-1; } 
}
@keyframes orange { 
0%   { z-index:-1; }
50%  { z-index:1;   } 
100% { z-index:-1; } 
}
@keyframes rouge { 
0%   { z-index:-1; }
50%  { z-index:-1; } 
100% { z-index:1; } 
}

Code html :

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

1
2
3
4
5
<div class="feu">
  <div class="noir"><div class="rouge"></div></div>
  <div class="noir"><div class="orange"></div></div>
  <div class="noir"><div class="vert"></div></div>
</div>

Ou y a-t-il une autre façon de faire que le z-index?
Si quelqu'un à le temps d'y jeter un oeil, merci d'avance

[Invité]

Bonjour jefReb,

on utilisera plutôt opacity : http://codepen.io/jreaux62/pen/Qprebd

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="feu">
  <div class="noir">
    <div class="rouge"></div>
  </div>
  <div class="noir">
    <div class="orange"></div>
  </div>
  <div class="noir">
    <div class="vert"></div>
  </div>
</div>

Durée du feu :

• rouge : 50s / 50%
• vert : 45s / 45%
• orange : 5s / 5%

Total : 100s / 100%

Animation : on peut ramener à 30s, 50s,... (en gardant la proportion)

Code css :

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
*   { box-sizing:border-box;}
.feu {
	width: 120px;
	height: 350px;
	margin-top:50px;
	background-color:#999;
	border-radius: 15px;
	border: 3px solid black;
}
.noir, .rouge, .orange, .vert {
	z-index:0;
	width: 100px;
	height: 100px; 
	border-radius: 50px;	
	}
.noir {
	margin:10px;
	background-color: black;
 
}
 
.rouge {
	position: relative;
	background-color:red;
	animation: rouge 30s infinite;	
}
.orange {
	position: relative;
	background-color:orange;
	animation: orange 30s infinite;
}
.vert {
	position: relative;
	background-color:green;
	animation: vert 30s infinite;
}

Code css :

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
@keyframes rouge { 
0%   { opacity:1; }
50%  { opacity:1; } 
51% { opacity:0; } 
100% { opacity:0; } 
}
@keyframes vert { 
0%   { opacity:0; }
50%  { opacity:0; } 
51% { opacity:1; } 
95% { opacity:1; }
96% { opacity:0; }
100% { opacity:0; } 
}
@keyframes orange { 
0%   { opacity:0; }
95% { opacity:0; } 
96% { opacity:1; }
100% { opacity:1; } 
}

[JefReb]

Super Jreaux62, Je vais m'y mettre tout de suite.
Encore merci

[JefReb]

Effectivement, j'avais pensé en premier à opacity, mais je n'avais pas pensé à l'utiliser avec plusieurs % pour la même opacity.
Cela permet de désynchroniser les animations.
Comme quoi poser la question dans les forums est important.

Cela dit, cela n'explique pas avec les z-index, cette impression (qui n'en est pas une, je pense) que le passage du vert à l'orange est plus rapide que orange-> rouge et rouge -> vert.
Peut être est-ce lié au navigateur?

En tout cas merci beaucoup, cela va m'aider pour leur apprendre dans le club informatique.

[NoSmoking]

Bonjour,

Cela dit, cela n'explique pas avec les z-index, cette impression (qui n'en est pas une, je pense) que le passage du vert à l'orange est plus rapide que orange-> rouge et rouge -> vert.

si l'on observe ton cycle il peut tout à fait être schématisé, un peu vite, comme suit

En simplifiant, l'élément sera visible à l'écran lorsque son tracé passe au dessus de la ligne 0.
On observe que pour une animation de 4s, dans la réalité il y aura un recouvrement ^(*).

• Vert visible : 1s
• Orange visible : 2s, plutôt proche de 2.5s ^(*)
• Rouge visible : 1s, plutôt proche de 1.5s ^(*)

Pour mieux voir le recouvrement teste avec ce CSS en augmentant la valeur du z-index positif pour Vert et Rouge ce qui augmentera la pente de l'effet:

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 vert {
  0% {
    z-index: 10;
  }
  50% {
    z-index: -1;
  }
  100% {
    z-index: -1;
  }
}
@keyframes orange {
  0% {
    z-index: -1;
  }
  50% {
    z-index: 1;
  }
  100% {
    z-index: -1;
  }
}
@keyframes rouge {
  0% {
    z-index: -1;
  }
  50% {
    z-index: -1;
  }
  100% {
    z-index: 10;
  }
}

De plus, si l'on enchaine alors en fin de cycle la séquence suivante reprend à 0% avec réinitialisation des valeurs, ce qui donne

On observe qu'au niveau du passage de 100% vers 0% il y a rupture dans la continuité sur les éléments Vert et Rouge.

En fait ce que tu aimerais avoir ce sont des séquences égales qui s'enchainent comme par exemple


Pour ce faire il te faut redéfinir les étapes de ton cycle en modifiant les valeurs intermédiaires par exemple comme suit


Nota 1 : Tu pourrais, pour ne te servir que d'une seule et même keyframe utiliser animation-delay.

Nota 2 : La propriété z-index accepte des valeurs de type ENTIER, la courbe sera en réalité un « escalier » dont les seules valeurs autorisées seraient 1, 0 et -1.

Nota 3 : Comme c'est quand même pas mal schématisé, pour bien plus d'informations : Web Animations W3C Working Draft

[JefReb]

Mille merci nosmoking,
Superbe explication plus détaillée que la première fois.
En effet c'est le même problème soulevé dans un précédent post par un autre sur un fondu enchainé d'images.
Et j'ai gardé ta réponse précieusement, (je pense que c'est toi. Désolé pour mon manque de mémoire), qui donnait un code pour calculer ces %.
Encore merci à Jreaux et Nosmoking
Jef

[JefReb]

Désolé, mais je reouvre cette discution.
Les explications de NoSmocking sont très clairs et le feu-rouge fonctionne parfaitement avec 3 couleurs séparées avec leur propre animation et avec 3 @keyframes séparés pour chacune des couleurs.

Par contre sur la phrase de NoSmocking

Nota 1 : Tu pourrais, pour ne te servir que d'une seule et même keyframe utiliser animation-delay.

je cherche depuis à faire qu'une seule et même @keyframes.
Mais je n'y arrive pas.
Autant cela marche avec plusieurs images qui apparaissent au même endroit (voir dans un précédent post), mais dans le cas du feu rouge, ce sont 3 images séparées et pas à la même place.

En tout cas je sèche sur cette remarque.
Si NoSmocking pouvait m'éclairer...

[NoSmoking]

Reprenons par exemple le cycle suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes opacite {
  0% {
    opacity: 0;
  }
  33.333% {
    opacity: 1;
  }
  66.666% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

ce que l'on veut obtenir est :

tous les tracés sont identiques mais décalés quant à leur démarrage, c'est là qu'intervient le « delay ».

Si l'on considère que l'animation, de 0 à 100%, dure 3s pour faciliter les calculs :

• il faut démarrer l'effet Orange à 33.33% soit 1s après le début ;
• il faut démarrer l'effet Rouge à 66.66% soit 2s après le début.

cela se traduit par

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.rouge, .orange, .vert {
  opacity: 0;      /* initialisation propriété à animer */
  animation: opacite 3s infinite;
}
.vert {
  animation-delay: 0s;
}
.orange {
  animation-delay: 1s;
}
.rouge {
  animation-delay: 2s;
}

[JefReb]

Ha ok. Mille Merci
Cette fois j'ai bien compris. Je clos définitivement

[JefReb]

incompréhensible!!!
J'avais clos, puis après essai, cela ne marchait pas! pas de problème historique ou de réactualisation de pages,
Donc j'ai réouvert le topic, refait les essais pour décrire le problème, et là!!! ça marche!
Incompréhensible!
Donc je me dis que j'avais bien compris la première fois, mais bof!
Donc je reclos définitivement le topic. Merci encore à NoSmocking.