CSS动画：如何让图像对象无缝地反弹回来？

Question

演示： http://www.suanle.lol/move.php

在动画演示中，你可以看到，当蛋只是在反弹的角度来看，它闪烁出一秒钟，然后闪过这使得动画破碎。所以我想知道为什么会发生这种情况，以及我如何解决这个问题？

如果你想查询的GIF：

其实并不仅仅局限于.gif文件，对于出现画面的任何格式的问题。

代码如下：

#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

好吧，这看起来好多了，改49%到49.9%，它增强了它一下，这个问题是这样的1%6.4s动漫持续时间仍然显而易见，这使得它“闪烁”。

通过减少从1%到0.1%此差所需的周期来变换从scaleX(1)到scaleX(-1)不明显

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">