什么是离散动画？

Question

MDN 动画文档指的是动画类型是离散。这是什么意思？

Answer 1

离散动画从一个关键帧进行到下一个关键帧，无需任何插值。

以您通常看待动画的方式来思考它——一张图像到下一张图像。插值是中间 - 填充主图像之间的空间（在计算机图形的情况下，这些空间是从公式中找到的）。

在传统的手绘动画中，主要艺术家会制作关键帧，助理会绘制中间帧。

所以离散动画就像手绘动画一样，没有助手的介入。

Answer 2

这意味着该属性在动画中可用，但它会在值发生任何变化时突然切换状态，即值不能在中间插值。

为了进行比较，您提到的 MDN 文档中还有另一类动画类型，即“不可动画”。这意味着该属性无法从一个值切换到另一个值，即使在动画中定义也是如此。

以此为例。 不管出于什么原因，你有一个表情符号，你希望它在悬停一秒钟后消失。

让我们在这里尝试

visibility: hidden;

。它按预期工作。

.ball {
  visibility: visible;
}

.ball:hover {
  animation: hide 1s forwards;
}

@keyframes hide {
  to {
    visibility: hidden;
    /* display: none; */
    translate: 100px;
  }
}

<div class="ball">⚽</div>

但是在这种情况下，

display: none;

根本不起作用。

.ball {
  display: block;
}

.ball:hover {
  animation: hide 1s forwards;
}

@keyframes hide {
  to {
    /* visibility: hidden; */
    display: none;
    translate: 100px;
  }
}

<div class="ball">⚽</div>

这是因为

visibility

是离散动画属性，而

display

是不可动画属性。

更新：随着 webkit 根据

此公告

使 display 属性可转换，第二个示例行为可能会很快发生变化。但你还是明白了。