Question

事实上我几乎成功了：我需要div反弹：

<div class="container">
    <div class="flipcard transition allowhover">
        <h1>This is card</h1>
    </div>
</div>

然后我使用css3 animate来实现反弹效果：

.container{
    width: 100%;
    height: 100%;
    -moz-perspective: 1000px;
}
.flipcard{
    background: red;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 40px;
    left: 20px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition:all 0.6s ease-in-out;
}
.allowhover:hover{
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-direction: normal;
}


@-webkit-keyframes bounce {
   25% {
     top:7px;
   }
   45% {
     top:40px;
   }
   64% {
      top:19px;
   }
   76% {
      top:40px;
   }
   96%{
      top: 25px
   }
   100% {
      top:40px;
   }
}

现在，在线示例位于：http://jsfiddle.net/GEEtx/

看起来有用，但还不够好，我应该如何设置key-frames参数让它像球一样弹跳？是否有公式来计算弹跳高度和根据元素的宽度和高度计算，还是时间？

Answer 1

如果没有反复试验，我们可以根据需要找出反弹效果。

在所有jQuery缓动插件中都使用了这个公式来获得反弹效果。

        easeInBounce: function (x, t, b, c, d) {
                return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
        },
        easeOutBounce: function (x, t, b, c, d) {
                if ((t/=d) < (1/2.75)) {
                        return c*(7.5625*t*t) + b;
                } else if (t < (2/2.75)) {
                        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
                } else if (t < (2.5/2.75)) {
                        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
                } else {
                        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
                }

// t: current time, b: begInnIng value, c: change In value, d: duration

因此将其应用于当前的CSS关键帧。
d：动画持续时间。 //1.5：1500
b：开始时的最高值// 0
c：值变化// 40px
t：当前时间// 10

通过应用这些来做更多工作，我们可能会发现CSS中弹跳效果所需的值。

我也发现了CSS3 3D Bouncing Ball tutorial

希望这对你有所帮助。

如何使用css3实现球弹跳效果？

1 个答案: