html - CSS3跳跃动画

我想使用CSS3动画为跨度添加3D跳跃效果。我上传了一张显示方向的图片。

我尝试使用以下示例，但是跨度会上下跳跃。我需要3D跳跃效果。我摆弄了我的演示here。

上传的图像为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;
}

最佳答案

为了保持一致的跳跃，您可以尝试使用JQuery UI。它将使文本跳转任意多次。

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

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