css - 是否允许在 CSS 关键帧动画中使用任何十进制值？

Question

我想知道是否可以使用这样的百分比值：

@keyframes myAnimation {
    0%    { height: 100px; }
    33.3% { height: 120px; }
    66.6% { height: 140px; }
    100%  { height: 200px; }
}

它似乎有效，但我不确定浏览器是否可能只是“围绕”这个？那么像 33.3457% 这样的值呢？非常感谢！

Answer 1

当涉及到 CSS 时，它会注意到小数点后 2 位的百分比，然后停止。因此，您将能够获得 33.34% 而不是 33.3457% 用于您的关键帧

我希望这有帮助。

Answer 2

是的，您可以使用小数部分来定义更精确的关键帧百分比。但这种精度并没有明确规定。

所有支持 CSS 动画的浏览器都支持它。但不要使用过多的小数，可能会出现奇怪的行为（尤其是 5 位以上）。

我将它用于带有循环的复杂动画：

@keyframes{
    0%, 30%, 40%, 50%, 60%{
        top: 0px;
    }
    29.99999%, 39.99999%, 49.99999%, 59.99999%{
        top: 100px;
    }
    100%{
        top: 200px;
    }
}
/*
- 0px to 100px (30%)
- loop 3 times 0px to 100px (10% each, total 30%)
- 0px to 200px (40%)
*/

The SASS default precision is 3 digits and can be changed with --precision (cmd option) or Sass::Script::Number.precision