是否允许在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%)
*/

SASS默认精度为3位数,可以使用--precision(cmd选项)或更改Sass::Script::Number.precision