CSS animation:How to make the image object bounce back seamlessly? - html

Question

Demo:
http://www.suanle.lol/move.php
In the animation demo you can see that when the egg just at the point of bouncing back, it flashes out for a second then flashed in. This makes the animation broken. So I wondered why this is happening and how I could fix it?
If you want to check the Gif:
Actually not just limited to the .gif, the problem occurs for any format of picture.
code is below:
#egg {
z-index: 2;
margin-left: 50px;
/*display: none;*/
position: absolute;
animation-duration: 6.4s;
animation-name: slide;
animation-iteration-count: infinite;
/*animation: pulse 5s infinite;*/
}
#keyframes slide {
0% {
margin-left: 10px;
/*width: 300%; */
}
49% {
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
margin-left: 350px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
100% {
margin-left: 10px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
<img id="egg" src="http://i.stack.imgur.com/Ke7wO.gif">

Answer 1

Ok , This looks much better, changed 49% to 49.9% and it enhanced it a bit, the problem was this 1% of the 6.4s duration of animation is still noticeable which makes it "flashes".
by reducing this difference from 1% to 0.1% the period needed to transform from scaleX(1) to scaleX(-1) is not noticeable
jsFiddle
#container {
position: absolute;
background-color: rgb(231, 143, 128);
width: 310px;
height: 42px;
margin-left: 50px;
z-index: 1;
}
#egg {
z-index: 2;
margin-left: 50px;
/*display: none;*/
position: absolute;
animation-duration: 6.4s;
animation-name: slide;
animation-iteration-count: infinite;
/*animation: pulse 5s infinite;*/
}
#keyframes slide {
0% {
margin-left: 10px;
/*width: 300%; */
}
49.9% {
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";
}
50% {
margin-left: 350px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
100% {
margin-left: 10px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
<img id="egg" src="http://i.stack.imgur.com/Ke7wO.gif">