javascript - CSS3 アニメーションを純粋な JavaScript に変換する

Question

単純な CSS3 アニメーションを純粋な JavaScript に変換したい (jQuery ではなく、そのような単純なことのためにライブラリ全体をロードするのはやり過ぎだと思うため)。

http://daneden.me/animate/のアニメについてbounceInUpです。サンプルデモ: http://jsfiddle.net/ELDf7/

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

http://javascript.info/tutorial/animationには、JavaScript でアニメーションを行う方法に関するチュートリアルがあります。しかし、私は数学があまり得意ではないので、PhotoShop でグラフを作成して、アニメーションが JavaScript でどのように実行されるかを示しました (概算):

_{(他の「デルタ」のグラフ プロッタは、ここにあります)}

アニメーションの「デルタ」を返す純粋な JavaScript で、このグラフから数式を作成することは可能ですか?

バウンス機能でいろいろ試してみたのですが、うまくいきませんでした。( http://jsfiddle.net/ELDf7/2/ )

編集： 私はうまく数式を作ることができました：

_{-Math.cos(2*Math.PI*進行状況) + Math.pow(進行状況, 1) * ((1.5 + 1) * 進行状況 - 1.5);}

しかし、別の問題が発生しました。CSS3 アニメーションのように、画像全体が非表示になるのではなく、画像の半分が表示された状態でアニメーションが開始されます。

JavaScript アニメーションのライブ デモについては、こちらを参照してください: http://jsfiddle.net/ELDf7/14/

画像が最初に完全に非表示になるように変更する方法を知っている人はいますか? おそらく、画像の高さを含む変数を作成し、JavaScript が計算を行って、画像の半分が表示されるまでアニメーションが開始されないようにすることができます。