什么是补间在CSS？

Question

什么是在CSS精确补间和我们在哪里使用它。当我在网上搜索有关它的时候，我所知道的是“姿势 - 姿势选项是在整个序列中创建几个关键帧，然后填充空隙。填充这些空隙称为中间或补间”。有人能用一个示例代码片段来解释我吗？

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%; 
    } 
}