Bug Animation
Publié : 17 déc. 2013, 01:45
Bonjour à tous,
J'ai trouvé un bug vraiment bizarre et impossible à corriger lorsque l'on utilise deux animations en même temps.
J'essaie de faire une balle qui rebondi et qui va de gauche à droite, mais l'animation "animationBalleY" s'arrête avant la fin, et la div devient invisible ou tronquée, et cela sans raison.
En supprimant l'animation "animationBalleX" l'animation "animationBalleY" fonctionne et si je supprimer l'animation "animationBalleY" l'animation "animationBalleX" fonctionne également.
Html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation</title>
<link href="medias/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="balleX">
<div class="balleY"></div>
</div>
</body>
</html>
Css :
.balleX { background: #f00; -moz-animation: animationBalleX 3s ease-out forwards; height: 50px; width: 50px; }
.balleY { background: #f00; -moz-animation: animationBalleY 3s ease-out forwards; height: 50px; width: 50px; }
@-moz-keyframes animationBalleX { 0% { -moz-transform: translateX(0px); } 100% { -moz-transform: translateX(428px); } }
@-moz-keyframes animationBalleY
{
0% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in; }
10% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
20% { -moz-transform: translateY(413px); -moz-animation-timing-function: ease-in; }
30% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
38% { -moz-transform: translateY(524px); -moz-animation-timing-function: ease-in; }
46% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
52% { -moz-transform: translateY(560px); -moz-animation-timing-function: ease-in; }
58% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
62% { -moz-transform: translateY(575px); -moz-animation-timing-function: ease-in; }
66% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
100% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
}
Que se passe t'il ? Comment corriger ?
Merci d'avance.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
J'ai trouvé un bug vraiment bizarre et impossible à corriger lorsque l'on utilise deux animations en même temps.
J'essaie de faire une balle qui rebondi et qui va de gauche à droite, mais l'animation "animationBalleY" s'arrête avant la fin, et la div devient invisible ou tronquée, et cela sans raison.
En supprimant l'animation "animationBalleX" l'animation "animationBalleY" fonctionne et si je supprimer l'animation "animationBalleY" l'animation "animationBalleX" fonctionne également.
Html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation</title>
<link href="medias/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="balleX">
<div class="balleY"></div>
</div>
</body>
</html>
Css :
.balleX { background: #f00; -moz-animation: animationBalleX 3s ease-out forwards; height: 50px; width: 50px; }
.balleY { background: #f00; -moz-animation: animationBalleY 3s ease-out forwards; height: 50px; width: 50px; }
@-moz-keyframes animationBalleX { 0% { -moz-transform: translateX(0px); } 100% { -moz-transform: translateX(428px); } }
@-moz-keyframes animationBalleY
{
0% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in; }
10% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
20% { -moz-transform: translateY(413px); -moz-animation-timing-function: ease-in; }
30% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
38% { -moz-transform: translateY(524px); -moz-animation-timing-function: ease-in; }
46% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
52% { -moz-transform: translateY(560px); -moz-animation-timing-function: ease-in; }
58% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
62% { -moz-transform: translateY(575px); -moz-animation-timing-function: ease-in; }
66% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
100% { -moz-transform: translateY(580px); -moz-animation-timing-function: ease-out; }
}
Que se passe t'il ? Comment corriger ?
Merci d'avance.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0