CSS3跳躍動畫

Question

我想使用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; 
} 

Answer 1

對於一貫跳躍，你可以嘗試使用jQuery UI。它會使文本跳轉多次，只要你想。

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

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

Answer 2

嘗試用寬鬆對動畫再生

cubic-bezier(0, 0, .58, 1)應該做的伎倆

更新小提琴https://jsfiddle.net/d846408x/3/