28172 sujets

CSS et mise en forme, CSS3

[resolu] Animation css3 webkit.

Bonjour, j'ai certainement une erreur de syntaxe car j'ai une animation qui ne fonctionne pas sous chrome, safari. Pourtant je ne comprend pas mon erreur. Si quelqu’un de plus malin pouvait m'éclairer ?
Merci d'avance.

Voici mes 3 animations, sous firefox elles fonctionnent toutes.
En revanche sur chrome/safari, seule animRoule fonctionne. Une idée de ce que j'ai mal fait ?

@keyframes mouv {
	0%{left: -400px;}
	2%{left: 100%;}
	4%{left: -400px;}
	69%{left: -400px;}
	72%{left: 100%;}
	76%{left: -400px;}
}
@-webkit-keyframes mouv {
	0%{left: -400px;}
	2%{left: 100%;}
	4%{left: -400px;}
	69%{left: -400px;}
	72%{left: 100%;}
	76%{left: -400px;}
}

@keyframes tremble {
	0% { transform: translate(0px, 0px) rotate(0deg);}
	5% { transform: translate(2px, 1px) rotate(0deg);}
	6% { transform: translate(-1px, -2px) rotate(-1deg);}
	7% { transform: translate(-2px, 0px) rotate(1deg);}
	8% { transform: translate(0px, 2px) rotate(0deg);}
	9% { transform: translate(1px, -1px) rotate(1deg);}
	10% { transform: translate(-1px, 2px) rotate(-1deg);}
	12% { transform: translate(0px, 0px) rotate(0deg);}
	95% { transform: translate(0px, 0px) rotate(0deg);}
	96% { transform: translate(-2px, 1px) rotate(0deg);}
	97% { transform: translate(2px, 1px) rotate(-1deg);}
	98% { transform: translate(-1px, -1px) rotate(1deg);}
	99% { transform: translate(2px, 2px) rotate(0deg);}
	100% { transform: translate(1px, -2px) rotate(-1deg);}
}
@-webkit-keyframes tremble {
	0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
	5% { -webkit-transform: translate(2px, 1px) rotate(0deg);}
	6% { -webkit-transform: translate(-1px, -2px) rotate(-1deg);}
	7% { -webkit-transform: translate(-2px, 0px) rotate(1deg);}
	8% { -webkit-transform: translate(0px, 2px) rotate(0deg);}
	9% { -webkit-transform: translate(1px, -1px) rotate(1deg);}
	10% { -webkit-transform: translate(-1px, 2px) rotate(-1deg);}
	12% { -webkit-transform: translate(0px, 0px) rotate(0deg);}
	95% { -webkit-transform: translate(0px, 0px) rotate(0deg);}
	96% { -webkit-transform: translate(-2px, 1px) rotate(0deg);}
	97% { -webkit-transform: translate(2px, 1px) rotate(-1deg);}
	98% { -webkit-transform: translate(-1px, -1px) rotate(1deg);}
	99% { -webkit-transform: translate(2px, 2px) rotate(0deg);}
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg);}
}

@keyframes animRoule{
   from {transform:rotate(0deg); left:0px;} to {transform:rotate(360deg); left:350px;}
}
@-webkit-keyframes animRoule{
   from {-webkit-transform:rotate(0deg); left:0px;} to {-webkit-transform:rotate(360deg); left:350px;}
}

Modifié par casp (27 Dec 2013 - 23:19)
Bonjour,

Il manque une partie du CSS (l'appel aux animations) éventuellement le code HTML...
Je ne vois, a priori, pas d'erreur dans cette partie de code, pourriez-vous fournir une page de test en ligne ?

Cdt,
Sylvain
Je suis en local, je ne peux donc pas te montrer mon exemple pour le moment.
Modifié par casp (27 Dec 2013 - 18:20)
Bon après avoir creuse run peu plus, le problème semble lié à l'usage de LESS
Si je met direct dans le header mes <style> je fais fonctionner les anims sans problème.
Modifié par casp (27 Dec 2013 - 16:55)
J'arrive à faire fonctionner l’animation dans chrome, en revanche toujours pas dans safari.
Après la compilation less j’obtiens ce code css et il ne fonctionne pas avec safari.

@-webkit-keyframes mouv{0{left:-400px}
2%{left:1400px}
4%{left:-400px}
69%{left:-400px}
72%{left:1400px}
76%{left:-400px}}
@keyframes mouv{0{left:-400px}
2%{left:1400px}
4%{left:-400px}
69%{left:-400px}
72%{left:1400px}
76%{left:-400px}}
@-webkit-keyframes tremble{0{-webkit-transform:translate(0,0) rotate(0deg)}
5%{-webkit-transform:translate(2px,1px) rotate(0deg)}
6%{-webkit-transform:translate(-1px,-2px) rotate(-1deg)}
7%{-webkit-transform:translate(-2px,0) rotate(1deg)}
8%{-webkit-transform:translate(0,2px) rotate(0deg)}
9%{-webkit-transform:translate(1px,-1px) rotate(1deg)}
10%{-webkit-transform:translate(-1px,2px) rotate(-1deg)}
12%{-webkit-transform:translate(0,0) rotate(0deg)}
95%{-webkit-transform:translate(0,0) rotate(0deg)}
96%{-webkit-transform:translate(-2px,1px) rotate(0deg)}
97%{-webkit-transform:translate(2px,1px) rotate(-1deg)}
98%{-webkit-transform:translate(-1px,-1px) rotate(1deg)}
99%{-webkit-transform:translate(2px,2px) rotate(0deg)}
100%{-webkit-transform:translate(1px,-2px) rotate(-1deg)}}
@keyframes tremble{0{transform:translate(0,0) rotate(0deg)}
5%{transform:translate(2px,1px) rotate(0deg)}
6%{transform:translate(-1px,-2px) rotate(-1deg)}
7%{transform:translate(-2px,0) rotate(1deg)}
8%{transform:translate(0,2px) rotate(0deg)}
9%{transform:translate(1px,-1px) rotate(1deg)}
10%{transform:translate(-1px,2px) rotate(-1deg)}
12%{transform:translate(0,0) rotate(0deg)}
95%{transform:translate(0,0) rotate(0deg)}
96%{transform:translate(-2px,1px) rotate(0deg)}
97%{transform:translate(2px,1px) rotate(-1deg)}
98%{transform:translate(-1px,-1px) rotate(1deg)}
99%{transform:translate(2px,2px) rotate(0deg)}
100%{transform:translate(1px,-2px) rotate(-1deg)}}
@-webkit-keyframes test{0{opacity:0}
100%{opacity:1}}
@keyframes test{0{opacity:0}
100%{opacity:1}}
#box{margin:20px;background:red;width:100px;height:100px;display:block;position:relative;left:0;-webkit-animation:tremble 2s infinite,test 5s infinite;animation:tremble 2s infinite,test 5s infinite}
#logo img#logo_double{margin:0 auto;position:absolute;z-index:99;top:0;left:50%;margin-left:-75px;-webkit-animation:tremble 2s linear 0s infinite;animation:tremble 2s linear 0s infinite}
#texture{background:url("http://localhost:8888/SPIPcasp%20Template/squelettes-actif/IMG/LOGO_texture.png") no-repeat;position:absolute;z-index:101;width:370px;height:150px;top:0;left:0;-webkit-animation:mouv 6s alternate linear 0s infinite;animation:mouv 6s alternate linear 0s infinite}


Pourtant le même code mais non compilé, lui fonctionne.

/* animations */
	
@-webkit-keyframes mouv {
	0%{left: -400px;}
	2%{left: 1400px;}
	4%{left: -400px;}
	69%{left: -400px;}
	72%{left: 1400px;}
	76%{left: -400px;}
}
@keyframes mouv {
	0%{left: -400px;}
	2%{left: 1400px;}
	4%{left: -400px;}
	69%{left: -400px;}
	72%{left: 1400px;}
	76%{left: -400px;}
}
@-webkit-keyframes tremble {
	0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
	5% { -webkit-transform: translate(2px, 1px) rotate(0deg);}
	6% { -webkit-transform: translate(-1px, -2px) rotate(-1deg);}
	7% { -webkit-transform: translate(-2px, 0px) rotate(1deg);}
	8% { -webkit-transform: translate(0px, 2px) rotate(0deg);}
	9% { -webkit-transform: translate(1px, -1px) rotate(1deg);}
	10% { -webkit-transform: translate(-1px, 2px) rotate(-1deg);}
	12% { -webkit-transform: translate(0px, 0px) rotate(0deg);}
	95% { -webkit-transform: translate(0px, 0px) rotate(0deg);}
	96% { -webkit-transform: translate(-2px, 1px) rotate(0deg);}
	97% { -webkit-transform: translate(2px, 1px) rotate(-1deg);}
	98% { -webkit-transform: translate(-1px, -1px) rotate(1deg);}
	99% { -webkit-transform: translate(2px, 2px) rotate(0deg);}
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg);}
}
@keyframes tremble {
	0% { transform: translate(0px, 0px) rotate(0deg);}
	5% { transform: translate(2px, 1px) rotate(0deg);}
	6% { transform: translate(-1px, -2px) rotate(-1deg);}
	7% { transform: translate(-2px, 0px) rotate(1deg);}
	8% { transform: translate(0px, 2px) rotate(0deg);}
	9% { transform: translate(1px, -1px) rotate(1deg);}
	10% { transform: translate(-1px, 2px) rotate(-1deg);}
	12% { transform: translate(0px, 0px) rotate(0deg);}
	95% { transform: translate(0px, 0px) rotate(0deg);}
	96% { transform: translate(-2px, 1px) rotate(0deg);}
	97% { transform: translate(2px, 1px) rotate(-1deg);}
	98% { transform: translate(-1px, -1px) rotate(1deg);}
	99% { transform: translate(2px, 2px) rotate(0deg);}
	100% { transform: translate(1px, -2px) rotate(-1deg);}
}
@-webkit-keyframes test {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes test {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#box {
	margin: 20px;
	background:red;
	width:100px;
	height:100px;
	display:block;
	position:relative;
	left:0;
  -webkit-animation: tremble 2s infinite,test 5s infinite; /* Safari 4+ */
  animation:         tremble 2s infinite,test 5s infinite; /* IE 10+ */
}
#logo img#logo_double{
	margin: 0 auto;
	position: absolute;
	z-index: 99;
	top:0;
	left: 50%;
	margin-left: -75px;
	-webkit-animation:tremble 2s linear 0s infinite ;
	animation: tremble 2s linear 0s infinite ;}
#texture{
	background: url(IMG/LOGO_texture.png) no-repeat;
	position: absolute;
	z-index: 101;
	width:370px;
	height: 150px;
	top:0;
	left:0;
	-webkit-animation: mouv 6s alternate linear 0s infinite ;
	animation: mouv 6s alternate linear 0s infinite;}
	
/*fin animations */
Hello,

J'ai l'impression qu'il manque les points virgule dans ta version compilée, et je mettrai plus volontiers 0% que 0 pour débuter l'animation, non ?
Bien le problème est désormais bien déterminer..
Reste à voir si je peux le résoudre, sans pour autant me passer de la compilation Less pour cette partie du css..

Mais ceci est une autre histoire Smiley cligne
Merci pour ton aide !
Salut,

À quoi ressemble ton code LESS, il doit y avoir moyen de résoudre ce petit détail, non ?
Même s'il semble que LESS s'en sorte moins bien que SASS, et que certains "mixin" sont abomiffreux, cela devrait tout de même pouvoir se faire Smiley cligne

Un article d'Hugo Giraudel qui expose bien la problématique, et apporte une "éventuelle solution" (cf également les liens dans les commentaires).
Après quelques test en plus le coupable n'est en fait finalement pas less Smiley smile
C'est la compression CSS de spip; j'en discutte avec la communautée.
Sujet clos
Aller à