css中的补间是什么？

Question

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

Answer 1

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

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

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

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

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