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!

Well, let's say you have an animation that runs for 1000 seconds. 33% of that are 330 seconds while 33.3% are 333 seconds. That's a difference of 3 seconds, so yes, it does matter. — Seka, May 07 '12 at 17:40
I added this previous comment because the editor of this question asked "if it matters" and then deleted his comment after I answered. I don't know why he did that, but I don't want to leave my comment here without any context... — Seka, May 08 '12 at 19:05

score 34 · Accepted Answer · answered May 07 '12 at 18:27

34

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.

answered May 07 '12 at 18:27

MÖRK

954
11
31

3

I can't find any text in [the CSS animations specification](http://www.w3.org/TR/css3-animations/) that says that the percentages are valid to only two decimal places. Care to point it out? – Raymond Chen Jun 05 '12 at 07:11
I'm pretty sure you can use more than 2 decimal spaces. For example, Twitter Bootstrap uses 8 decimal points on their percentages, and while I don't know for sure I doubt that they would do that unless there was a reason for it. – Josef Engelfrost Sep 08 '14 at 07:44

score 8 · Answer 2 · answered May 15 '14 at 10:45

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

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

2 Answers2

Linked