什么是 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%;
  }
}