Simulieren bounceInDown Lockerung Wirkung von animate.css

Question

animate.css

Ich bin ein Spielautomat zu schreiben, und ich habe Code ähnlich wie diese: JSFiddle

$('#test').css("margin-top", 7400px); 
$('#test').animate(
    {"margin-top": "0px"}, 
    {'duration' : 3000, 'easing' : $.bez([0,0,0.9,1.1])} 
); 

ich mit dem Ergebnis nicht zufrieden bin. Am Ende scheint es einfach nicht glatt zu sein. Gibt es eine Bibliothek, die den Easing-Effekt hat wie der von animate.css? Der BounceInDown-Effekt von animate.css bewegt sich nur von außerhalb des Frames, was ich nicht kontrollieren kann (denke ich?). Die Elemente im Spiel, die ich schreibe, müssen sich von einem Punkt zum anderen bewegen. Ich habe versucht den easeOut-Effekt, der mit jQuery kommt, aber ich bin auch nicht zufrieden damit.

Answer 1

Wenn Sie wollen, dass es glatt Bounce, schlage ich vor mehrere Keyframes zu verwenden (da Ihre aktuelle Animation von nur keyfrome und eine Bezier-Funktion am Ende begrenzt ist), aber leider jQuery animieren() nicht unterstützt mehrere Keyframes. Also würde ich empfehlen, CSS dafür zu verwenden. Oder prüfen Sie einige zusätzliche Bibliotheken wie jQuery.Keyframes.

Nur Keyframes als Schritte vorstellen oder Zustände zwischen dem Start Keyframe und Ende Keyframe:

Wenn Sie die Animation von animate.css nur einen Blick haben, was sie in ihrer Animation tun (Ich habe Präfixe entfernt, um diese Kodierung zu verkürzen.

@keyframes bounceInDown { 
    from, 60%, 75%, 90%, to { 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 

    0% { 
    opacity: 0; 
    transform: translate3d(0, -3000px, 0); 
    } 

    60% { 
    opacity: 1; 
    transform: translate3d(0, 25px, 0); 
    } 

    75% { 
    transform: translate3d(0, -10px, 0); 
    } 

    90% { 
    transform: translate3d(0, 5px, 0); 
    } 

    to { 
    transform: none; 
    } 
} 

Lassen Sie sich einfach davon inspirieren und vielleicht ändern Sie es zu Ihren Gunsten.