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