Discussion :

[bronon]

Bonsoir à tous,
Je souhaite "scaler" une div de 4px de haut et de 20px de large en div de 4px de haut mais de 720px de large.
J'ai écrit ce script après beaucoup de surf avec "notre ami" :

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
#chargementVisuel {
	float:left;
	left:45%; 
	width:20px; /* 720px */
	margin-left:-350px; 
	height:4px; 
	border:0px solid #006699; 
	background-color: #006699;
	z-index:999; 
	position:absolute; 
	bottom:26px; 
	-webkit-animation: barreChargement 4s ease-out 0s 1 normal forwards ;
	-moz-animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
	-o-animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
	-ms-animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
	animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
}
@keyframes barreChargement {
    0% {}
    100% {transform: scale(36, 1)}
}
@-webkit-keyframes barreChargement {
    0% {}
    100% {transform: scale(36, 1)}
}
@-moz-keyframes barreChargement {
    0% {}
    100% {transform: scale(36, 1)}
}
@-o-keyframes barreChargement {
    0% {}
    100% {transform: scale(36, 1)}
}
@-ms-keyframes barreChargement {
    0% {}
    100% {transform: scale(36, 1)}
}

Je souhaite que cette animation s'active au chargement de la page mais rien ne fonctionne, pourquoi ?
Si qqu'un peut m'orienter vers une piste, d'avance merci ?

[Invité]

Bonjour,

sur firfox, ton code fonctionne.

Cela dit, si tu souhaites juste faire passer la barre de 20px à 720px :

Code css :

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

1
2
3
4
@keyframes barreChargement {
    0% { width:20px; }
    100% { width:720px; }
}

Voici une autre façon de faire :

Code html :

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

<div id="chargementVisuel"></div>

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
#chargementVisuel { 
  height:4px; width:720px;
  position:absolute;
  bottom:26px;
  z-index:999;
 }
#chargementVisuel:before {
	display:block; content:''; 
	height:4px; width:0;
	background-color: #006699;
	-webkit-animation: barreChargement 4s ease-out 0s 1 normal forwards ;
	-moz-animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
	-o-animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
	-ms-animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
	animation: barreChargement 4s ease-out 0s 1 normal forwards ; 
}
@keyframes barreChargement {
    0% { width:0; }
    100% { width:100%; }
}
/* ....... */

[bronon]

Ach j'ai toujours dit que s'adresser à des spécialistes ça faisait du bien !

Merci je n'avais pas pensé à la speudo class :before

Bon App

[NoSmoking]

Bonjour,
pourquoi ne pas faire simplement un 100%{ width:720px} directement sur l'élément ?