CSS3跳跃动画

Question

I want to add a 3D jumping effect to a span using CSS3 animations. I have uploaded one image that shows the direction.

I tried using the following example, but the span jumps up and down. I need a 3D jumping effect. I have fiddled my demo here .

The uploaded image is here .

html

<a class="bounce" href="#">hover me</a>

css

*{

    background-color:yellow;

}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
    }
    30% {
        -webkit-transform: translateY(30px);
    }
    100%{
        -webkit-transform: translateY(0px);
    }
}
.bounce:hover {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration:1s;
}

Answer 1

For consistent jumping you can try to use JQuery UI. it will make the text jump as many times as you want.

$(document).ready(function(){
    $('.hover').effect('bounce', 4);
});

https://jsfiddle.net/JoshuaHurlburt/d846408x/2/

Answer 2

try playing with the easing on that animation

cubic-bezier(0, 0, .58, 1) should do the trick

updated fiddle https://jsfiddle.net/d846408x/3/