css3キーフレームアニメーションのさまざまな部分のタイミング機能が異なりますか？ （正確なバウンス）

Question

これは可能ですか？私は、画面上に落下ボールを再作成しようとしている、と私はこのようなアニメーションを持っている：

@keyframes bounce { 
    20%, 40%, 60%, 74%, 84%, 92%, 100% { 
    transform: translate(0, 0); 
    } 
    0% { 
    transform: translate(0, -100vh); 
    } 
    30% { 
    transform: translate(0, -40vh); 
    } 
    50% { 
    transform: translate(0, -20vh); 
    } 
    68% { 
    transform: translate(0, -10vh); 
    } 
    80% { 
    transform: translate(0, -5vh); 
    } 
    88% { 
    transform: translate(0, -2vh); 
    } 
    96% { 
    transform: translate(0, -1vh); 
    } 
} 

と、この、このように実装する場合：

.ball { 
    animation: bounce 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 1 normal forwards; 
} 

はこのようなものを生成します。

これは..です大丈夫が、理想的ではありません。

しかし、これを行うために、私はそれらの残りの部分に比べて初期0-> 20％に異なるタイミング機能を持っている必要があります：私のような何かを行うことを好むだろう。キーフレームアニメーションのさまざまな部分に対して異なるタイミング機能を実行する方法はありますか？または、私が考えていないのアニメーションをバウンスして正確なのアニメーションを得る別の方法はありますか？どんな助けもありがとう！

編集：は、hereを追加しました。

Answer 1

むしろアニメーション全体ためtiming functionを指定するよりも、あなたは各キーフレームに指定することができます。この関数は、それぞれのキーフレームの最初から最後までどのように値が補間されるかを表します。

ease機能をキーフレーム20%, 40%, 60%, 74%, 84%, 92%, 100%に追加した例です。

@keyframes bounce { 
 
    20%, 40%, 60%, 74%, 84%, 92%, 100% { 
 
    transform: translate(0, 0); 
 
    animation-timing-function: ease; 
 
    } 
 
    0% { 
 
    transform: translate(0, -100vh); 
 
    } 
 
    30% { 
 
    transform: translate(0, -40vh); 
 
    } 
 
    50% { 
 
    transform: translate(0, -20vh); 
 
    } 
 
    68% { 
 
    transform: translate(0, -10vh); 
 
    } 
 
    80% { 
 
    transform: translate(0, -5vh); 
 
    } 
 
    88% { 
 
    transform: translate(0, -2vh); 
 
    } 
 
    96% { 
 
    transform: translate(0, -1vh); 
 
    } 
 
} 
 

 
.ball { 
 
    background: #ff0000; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 500px; 
 
    width: 50px; 
 
    height: 50px; 
 
    animation: bounce 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 1 normal forwards; 
 
}

<div class="ball"> </div>