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

是的，您可以使用小数部分来定义更精确的关键帧百分比。但这种精确度是not clearly specified。

所有支持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%)
*/

SASS默认精度为3位数，可以使用--precision（cmd选项）或Sass::Script::Number.precision

进行更改

是否允许在CSS关键帧动画中使用任何小数值？

2 个答案: