3

css3 アニメーションを動作させようとしていますが、期待どおりに動作しません。私は本質的に、弾性のように、最後に跳ね返って本当に素早く閉じた後です. アニメーションを十分に速く閉じることができず、バウンスが非常に遅く見えます。

私はフィドルを作成しました。どんな助けでも大歓迎です。

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    }
40% {
    -webkit-transform: translateY(-30px);
    }
60% {
    -webkit-transform: translateY(-15px);
    }
}

http://jsfiddle.net/bullrout/DZ8Qv/

4

3 に答える 3

3

必要なバウンス効果を実現できる 3 次ベジエ イージングを確認する必要があります。Lea Verou は、http: //cub-bezier.com/ でそれらを作成するための優れたツールを構築しました。

たとえば、これはバウンスのあるものですが、それで遊んで、必要な効果を得ることができます: http://cubic-bezier.com/#.91,.8,.54,1.39

于 2013-10-08T12:35:26.353 に答える