17

次のようなパーセンテージ値を使用しても大丈夫かどうか疑問に思います。

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

動作しているように見えますが、ブラウザがこれを「丸める」かどうかはわかりません。そして、33.3457％のような値はどうですか？どうもありがとう！

4

2 に答える 2

30

CSS に関しては、小数点以下 2 桁までのパーセンテージに注意して停止します。したがって、キーフレームで使用するために 33.34% を取得できますが、33.3457% を取得することはできません。

これが役立つことを願っています。

于 2012-05-07T18:27:32.090 に答える
8

はい、小数部分を使用して、より正確なキーフレームの割合を定義できます。しかし、そのような精度は明確に規定されていません。

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

于 2014-05-15T10:45:51.877 に答える