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% {         


        

Answer 1

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