CSS3 animation different on chrome and others - html

Question

Here is in fiddle an example of the problem that I'm facing. This animation has different behavior in different browsers. I need to make all work as Chrome. Tested on Chrome and Firefox.
HTML:
<div class='wrap'>
<div class='animate'></div>
</div>
CSS:
#keyframes test {
0% {
left: 0;
right: inherit;
width: 0;
}
10%{ width: 100%;}
49%{ width: 100%;}
59% {
left: inherit;
right: 0;
width: 0;
}
100% { width: 0;}
}
#-webkit-keyframes test {
0% {
left: 0;
right: inherit;
width: 0;
}
10%{ width: 100%;}
49%{width: 100%;}
59% {
left: inherit;
right: 0;
width: 0;
}
100% {width: 0;}
}
.wrap{
height: 10px;
position: relative;
width: 100%;
}
.animate{
background: #000;
height: 10px;
position: absolute;
top: 0;
-webkit-animation: test 6s infinite;
animation: test 6s infinite;
}

Answer 1

You can use this solution jsfiddle.net/vVGmR/2 - the only one css rule is animated here and it works. Tested on IE10, latest Firefox, Opera and Chrome
#keyframes test {
0% {left: -100%;}
10% {left: 0;}
49% {left: 0;}
59% {left: 100%;}
99.99% {left: 100%;}
100% {left: -100%;}
}
#-webkit-keyframes test {
0% {left: -100%;}
10% {left: 0;}
49% {left: 0;}
59% {left: 100%;}
99.99% {left: 100%;}
100% {left: -100%;}
}
.wrap{
height: 10px;
position: relative;
width: 100%;
overflow: hidden;
}
.animate{
background: #000;
height: 10px;
position: absolute;
top: 0;
width: 100%;
-webkit-animation: test 6s infinite;
animation: test 6s infinite;
}