アニメーションは、2つの連続したアニメーションを変換します。

Question

私はdivバウンス（第1アニメーション）を作ってから、第2アニメーションを作ります。したがって、2つのアニメーションがあります。最初の1つはOKですが、divは最後の位置には移動しません。それを行うことができる方法

$(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>

？

ありがとうございます！

Answer 1

まあ、私は答えを持っている、と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>