我可以使用哪些css屬性使我的彈跳動畫更平滑？

我在動畫一個簡單的反彈我figure，請參見下面的HTML：我可以使用哪些css屬性使我的彈跳動畫更平滑？

<figure> 
    <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt=""> 
    <figcaption> 
    <!-- empty for now --> 
    </figcaption> 
</figure>

我的CSS動畫如下：

@keyframes drop-in-thumb { 
    0% { 
     -webkit-transform: translateY(-50px); 
     -ms-transform: translateY(-50px); 
     -o-transform: translateY(-50px); 
     transform: translateY(-50px); 
     opacity: 0.8; 
    } 
    35% { 
     -webkit-transform: translateY(0); 
     -ms-transform: translateY(0); 
     -o-transform: translateY(0); 
     transform: translateY(0); 
     opacity: 1; 
    } 
    55% { 
     -webkit-transform: translateY(-15px); 
     -ms-transform: translateY(-15px); 
     -o-transform: translateY(-15px); 
     transform: translateY(-15px); 
    } 
    70% { 
     -webkit-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
     transform: translateY(0px); 
    } 
    85% { 
     -webkit-transform: translateY(-5px); 
     -ms-transform: translateY(-5px); 
     -o-transform: translateY(-5px); 
     transform: translateY(-5px); 
    } 
    100% { 
     -webkit-transform: translateY(0); 
     -ms-transform: translateY(0); 
     -o-transform: translateY(0); 
     transform: translateY(0); 
     opacity: 1; 
    } 
}

小提琴可以看出HERE。

問題是我的動畫相當生澀，I.E.它沒有實際的反彈效果，它看起來很明顯很乾。我的問題是關鍵幀中的其他屬性除了可以用來調整和使動畫流暢的％breakpoints嗎？

調整％斷點確實幫助我使動畫更平滑，但它的確不現實。我可以使用其他哪些CSS動畫屬性使此動畫更流暢？

如果有人能夠演示我如何完美並使這部動畫更加流暢，那將會很棒。

P.S.我知道animate.css庫，但不想使用它。

來源

2016-01-22 Alexander Solonik

嘗試使用不同的'動畫時序function'。默認的「線性」將會非常糟糕。「緩入」可能是理想的。 –

@NiettheDarkAbsol嗯，謝謝你的建議，讓我看看！ :) –

@AlexanderSolonik：甚至使用'cubic-bezier'自定義緩動函數可能會有幫助。順便說一下，我使用的是Chrome瀏覽器，動畫看起來並不真實。它相當平滑。 – Harry

animation-timing-function屬性應該大大改善。

嘗試添加以下的樣式figure：

-webkit-animation-timing-function: ease-in-out; 
-moz-animation-timing-function: ease-in-out; 
-o-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out;

我已經編輯您的提琴以示區別：https://jsfiddle.net/ssexmh3s/2/

來源

2016-01-22 14:26:53 Kelvin

我可以使用哪些css屬性使我的彈跳動畫更平滑？

回答

相關問題