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/

CSS3跳跃动画

2 个答案: