慢反弹Javascript

我试着使用放松，使图像缓慢地上下移动。我让它工作了，但是在第一个循环中有一个“跳过”。您可以在上看到它的运行，以下是我的代码：

// Bounce

function pushDavidUp() {
  $("#david").css({
    'transition' : 'transform 5s ease-in-out 0s',
    'transform' : 'translateY(-50px)'
  });
  setInterval(pushDavidDown, 5000);
}
function pushDavidDown() {
  $("#david").css({
    'transition' : 'transform 5s ease-in-out 0s',
    'transform' : 'translateY(50px)'
  });
  setInterval(pushDavidUp, 5000);
};
pushDavidDown();

---

我怀疑这是我应用CSS的方式上的问题，但我想知道我是否可以用JS进行补偿。

你可以用CSS

关键帧来实现这一点。确保添加相应的供应商前缀。请参阅下面的代码：


.container{
高度：1000px；
宽度：1000px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
大卫先生{
动画：上下5s缓进出交替无限；
转换：translateY（0px）
}
@关键帧向上向下{
0% {
转换：translateY（-50px）；
}
100% {
变换：translateY（50px）；
}
}
不要使用
setInterval（）
，因为它将每隔
N
毫秒（在您的情况下是
5000
）调用您作为参数传递的方法，因此在一段时间后，您将以多次调用同一函数结束。解决方法是使用事件
transitionend
上的侦听器来相互调用函数，如下所示：


函数pushDavidUp（）
{
$（“#david”）.css({
“转换”：“转换5s缓进输出0s”，
“transform”：“translateY（-50px）”的名称
});
美元（“#大卫”）。一(
“WebKittTransitionEnd otransitionend otransitionend msTransitionEnd transitionend transitionend transitionend msTransitionEnd transitionend transitionend”，
普什戴维敦
);
}
函数pushDavidDown（）
{
$（“#david”）.css({
“转换”：“转换5s缓进输出0s”，
“transform”：“translateY（50px）”的名称
});
美元（“#大卫”）。一(
“WebKittTransitionEnd otransitionend otransitionend msTransitionEnd transitionend transitionend transitionend msTransitionEnd transitionend transitionend”，
大卫杜普酒店
);
};
$（文档）.ready（函数（）
{
pushDavidDown（）；
});
#大卫{
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：天蓝色；
宽度：100px；
高度：100px；
边界半径：50%；
左：25%；
最高：25%；
}

大卫