Question

我正试图让div弹跳（第1个动画），然后出现（第2个动画）。所以，有两个动画。第一个是好的，但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>

然后动画转换，连续两个动画

1 个答案: