css 中的补间是什么？

Question

css 中的补间到底是什么，我们在哪里使用它。当我在网上搜索它时，我只知道 "The pose-to-pose option is to create a few keyframes throughout the sequence, and then fill in the gaps later. Filling in these gaps is known as in-betweening or tweening"。谁能用示例代码片段向我解释一下。

Answer 1

Tweening 不是 CSS 中经常使用的术语。正如您所发现的，它起源于计算机动画。动画师不会告诉程序确切地如何渲染每一帧，而是告诉程序对象在两点的位置 "keyframes"，然后程序会弄清楚如何在这两点之间转换对象。

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

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

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

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

css 中的补间是什么？

What is tweening in css?

css

css-transitions

css-transforms