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

【问题标题】：Animation then transform, two successive animations动画然后变换，两个连续的动画
【发布时间】：2017-11-05 21:57:29
【问题描述】：

我正在尝试制作一个 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>

怎么可能？

谢谢！

【问题讨论】：

标签： css css-transitions css-animations css-transforms

【解决方案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>

【讨论】：