CSS3 animation transition scale

Version imprimable

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:

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 ?

Bonjour,

sur firfox, ton code fonctionne.

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

Code:

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

Voici une autre façon de faire :

Code:

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

Code:

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%; }
}
/* ....... */

27/10/2015, 11h40
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
27/10/2015, 22h54
NoSmoking

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