애니메이션은 두 개의 연속적인 애니메이션을 변환합니다.

Question

div 바운스 (첫 번째 애니메이션)를 만들고 나서 (두 번째 애니메이션) 나옵니다. 따라서 두 가지 애니메이션이 있습니다. 첫 번째 것은 괜찮지 만 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>