这个css3动画如何工作？

Question

我想绘制一个弯曲的动画，经过大量的猴子编码后，我得到了理想的结果。但是我被困住了，这是怎么回事！

看看这张照片：demo

现在看一下这张照片：demo

我从left: 50px;

中删除50% keyframes后，得到了所需的动画曲面动画

但是，我想知道它是如何弯曲的，因为它的初始位置是left: 50px;，不是吗？即使我没有放置左边的值，它应该像以前一样，但令人惊讶的是它的弯曲。所以任何人都对此有所了解？

Answer 1

来自MDN - @keyframes

  

当某些关键帧中没有属性时
  您未在每个关键帧中指定的任何属性都是插值的

似乎值使用animation-timing-function在当前到下一个给定值的中间进行插值，在您的情况下为ease。

例如，当您将计时功能更改为linear时，您会得到一条直线

#ball {
    animation-timing-function: linear;
}

请参见修改后的JSFiddle

Answer 2

最后，我知道它是如何工作的。

当剩下一个属性（即删除）时，它的值会相应增加。

示例：

0%{bottom: 0%; left:0%;}
50%{bottom: 0%;}/*the left property is left(removed)*/
100%{bottom: 100%; left: 100%;}

在上面的代码中，50％左边的值是初始值（动画从0％开始）= 0％，终点（动画到100％）= 100％。 所以这里底部值将与50％关键帧中定义的相同，但是左边的值将相应地增加 从0％到1％，2％，3％，4％等等。同样，如果您离开（删除）底部属性并保留（添加）左侧属性，那么它 将相应地增加底部的价值。

请参阅此demo以使您的概念更加清晰。

因此，问题中的示范被视为弯曲。

顺便说一下，我已经制作了demo来制作圆形动画。

P / s：动画计时功能而不是轻松的工作方式不同。

尝试使用yourslef :: demo，将值从轻松更改为您想要的任何内容，例如轻松进出。