Is it allowed to use any decimal value in CSS keyframe animations?

Question

I'm wondering if it's ok to use percentage values like this:

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

It seems to work, but it I am not sure if the browsers might just "round" this? And what about values like 33.3457%? Thanks a lot!

Answer 1

When it comes to CSS it takes notice of percentages down to 2 decimal places and then stops. So you would be able to get 33.34% but not 33.3457% for use in your keyframes

I hope this helps.

Answer 2

Yes, you can use fractional part to define more precise keyframes percentages. But such precision is not clearly specified.

It's supported by all browsers that support CSS animations. But don't use too much decimals, strange behaviour may occur (especially above 5 digits).

I use that for complex animations with loops :

@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