css3 animation avec des rebonds à la fin

Je vais essayer d'obtenir un css3 animation de travailler, mais il ne fonctionne pas comme prévu. Je suis essentiellement après un très rapide fermer avec un rebond à la fin, comme des élastiques. J'ai juste ne peut pas obtenir de l'animation pour fermer assez rapide et le rebond semble vraiment lent.

J'ai créé un violon. Toute aide est appréciée.

@-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/

Pourquoi ne pas utiliser gsgd.co.royaume-uni/sandbox/jquery/assouplissement? Ils ont deux fonctions 'easeInBack" et "easeOutBack" qui vous donnent le rebond vous êtes à la recherche pour.
rebond semble lent? Avez-vous essayé la diminution de l'animation de la durée?

OriginalL'auteur user686483 | 2013-10-08

  1. 3

    Vous aurez envie de chercher à cubic-bezier assouplissement, qui peut faire de l'effet de rebond que vous voulez. Lea Verou construit un outil idéal pour créer à http://cubic-bezier.com/

    Par exemple, en voici une avec un rebond, mais vous pouvez jouer avec elle pour obtenir l'effet que vous voulez: http://cubic-bezier.com/#.91,.8,.54,1.39

    OriginalL'auteur stephenhay

  2. 0

    Le problème, c'est que vous n'avez pas activé les transitions parce que vous n'utilisez pas le bon nom dans la #drawer règle css

    Au lieu de 

    -webkit-transform: all 0.1s;

    vous devez utiliser

    -webkit-transition: all 0.1s;

    Démo à http://jsfiddle.net/DZ8Qv/2/

    OriginalL'auteur Gabriele Petrioli

  3. -3

    Utiliser jquery pour cela, ils ont plusieurs plugins pour aider avec cet assouplissement est l'un d'entre eux, ils ont easeoutbounce et telles et vous pouvez modifier la vitesse et de la ou des effets d'animation très facile à mettre en œuvre.

    OriginalL'auteur Adam 'Sacki' Sackfield