css中的补间是什么？ [关闭]

Question

在 css 中到底什么是补间以及我们在哪里使用它。当我在网上搜索它时，我只知道“姿势到姿势的选项是在整个序列中创建一些关键帧，然后填充间隙。填充这些间隙称为中间或补间”。有人可以用示例代码 sn-p 解释一下吗？

Answer 1

补间并不是 CSS 中经常使用的术语。正如您所发现的，它起源于计算机动画。动画师不会告诉程序确切地如何渲染每一帧，而是告诉程序对象在两个“关键帧”处的位置，程序会计算出如何在这两个点之间转换对象。

在 CSS 中，我们通常使用术语“动画”，但概念是相同的。 MDN 有很好的介绍here。这个简单的例子（来自文章）演示了如何让 <p> 元素从浏览器窗口的右边缘滑入：

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}