Css 动画然后变换，两个连续的动画

我正在尝试制作一个div反弹（第一个动画），然后出现（第二个动画）。因此，有两个动画。第一个位置没问题，但div没有进入最后一个位置

$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>$（文档）.height（）-$（窗口）.height（）-$（'.link'）.height（））{
$（'.link'）.addClass（'boom'）；
}
});
.link{
高度：250px；
最大宽度：900px；
保证金：自动；
填充：20px；
背景：浅蓝色；
边界半径：7px；
盒影：0px210pxRGBA（0,30,50,0.4）；
变换：translateY（300px）；
动画：反弹0.5s立方贝塞尔（0.63,0.09,0.75,0.46）0s交替9；
变换：变换300ms三次贝塞尔（0,0.47,0.32,1）；
过渡延迟：10秒；
}
@关键帧反弹{
0% {
变换：translateY（230px）；
}
100% {
变换：translateY（170px）；
}
}
.林克{
变换：translateY（100px）；
}
好吧，我已经得到了答案，没有必要使用JS:


.link{
高度：250px；
最大宽度：900px；
保证金：自动；
填充：20px；
对齐项目：居中；
变换：translateY（90px）；
边界半径：7px；
盒影：0px210pxRGBA（0,30,50,0.4）；
动画：呼吸3秒缓进缓出交替无限，反弹500毫秒立方贝塞尔（0.63,0.09,0.75,0.46）0秒交替9，吊杆600毫秒缓出4.5秒；
}
@呼吸关键帧{
0% {
背景颜色：浅蓝色；
}
100% {
背景色：黑色；
}
}
@关键帧反弹{
0% {
变换：translateY（230px）；
}
100% {
变换：translateY（170px）；
}
}
@关键帧动臂{
0% {
变换：translateY（170px）；
}
100% {
变换：translateY（90px）；
}
}
我的网站上有一个小故障……奇怪…