Animation then transform, two successive animations - css

Question

I'm trying to make a div bounce (1st animation), then come up (2nd animation). So, there are two animations. The first one is ok, but the div doesn't go to the last position.
$(window).scroll(function(){
if($(document).scrollTop() > $(document).height() - $(window).height() - $('.link').height()){
$('.link').addClass('boom');
}
});
.link {
height: 250px;
max-width: 900px;
margin: auto;
padding: 20px;
background: lightblue;
border-radius: 7px;
box-shadow: 0px 2px 10px rgba(0, 30, 50, 0.4);
transform: translateY(300px);
animation: bounce 0.5s cubic-bezier(0.63, 0.09, 0.75, 0.46) 0s alternate 9;
transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1);
transition-delay: 10s;
}
#keyframes bounce {
0% {
transform: translateY(230px);
}
100% {
transform: translateY(170px);
}
}
.link.boom {
transform: translateY(100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=link></div>
How could it be done?
Thanks!

Answer 1

Well, I've got the answer, and there's no need for JS:
.link {
height: 250px;
max-width: 900px;
margin: auto;
padding: 20px;
align-items: center;
transform: translateY(90px);
border-radius: 7px;
box-shadow: 0px 2px 10px rgba(0, 30, 50, 0.4);
animation: breathing 3s ease-in-out alternate infinite, bounce 500ms cubic-bezier(0.63, 0.09, 0.75, 0.46) 0s alternate 9, boom 600ms ease-out 4.5s;
}
#keyframes breathing {
0% {
background-color: lightblue;
}
100% {
background-color: black;
}
}
#keyframes bounce {
0% {
transform: translateY(230px);
}
100% {
transform: translateY(170px);
}
}
#keyframes boom {
0% {
transform: translateY(170px);
}
100% {
transform: translateY(90px);
}
}
There's a little glitch that is not on my website… Weird…
<div class="link"></div>