html - 使元素下降并反弹而不超过其静态位置

Question

我正在尝试制作一个带有关键帧的 CSS 动画，其中一个 div 会下降并在静止前反弹一次

到目前为止我已经设法做到这一点

 @keyframes bounce{
  0%{
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
   }
  60%{
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
    }
  80%{
    transform: translateY(-10px) rotate(-45deg)
    }
  100%
  {
    transform: translateY(0) rotate(-45deg)
    }
}

它有点弹跳，但它会像 flex 一样进入其原始位置，但我想要一个坚硬的地板，因此它不会进入其原始位置。这是我的 jsfiddle:

https://jsfiddle.net/s42t6wua/

Answer 1

似乎只要稍微调整一下您的数字就可以了。

  60% {
    opacity: 1;
    transform: translateY(0px) rotate(-45deg);
  }
  80% {
    transform: translateY(-20px) rotate(-45deg)
  }

这里有一些标有基线的演示。

Original Updated