设置CSS动画的边界

Question

我的CSS体验存在明显差距。虽然我可以很容易地应用和扩展我所知道的内容，但我错过了甚至搜索我不知道的内容的条款。

所以，我已经采用了Animation.css的部分并应用了它们，但我不知道如何约束像bounceInUp这样的动画范围。当动画发生时，过渡似乎没有界限。我想约束动画的边界，以便它在容器内启动和完成。

我想在这做什么？约束边界，剪辑动画，掩盖它？我一直在挖掘，但还没有找到我正在寻找的东西。

Answer 1

我发现的最佳解决方案是在CSS的translate3d（）中设置起始位置。不确定这是否是“正确的”方式，但它对我有正确的影响。我不确定我期待找到什么;但是，我并不特别喜欢这种方法，因为我必须根据容器元素的大小来调整动画CSS。我更喜欢只编写CSS解决方案一次并自由调整容器大小。

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    /* Set the y length(?) / offset position */
    transform: translate3d(0, 300px, 0);
  }
}