CODEWITHSUNDEEP
csspercentagecss-animations
Seka
Seka

Reputation: 1493

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

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!

Upvotes: 20

Views: 8078

Answers (3)

Shtole
Shtole

Reputation: 348

It seems, Chrome 133 supports 4 digits after decimal point.

99.9999% remains unchanged. 99.99999% is rounded to 100%.

Upvotes: -1

mems
mems

Reputation: 1264

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

Upvotes: 8

MÖRK
MÖRK

Reputation: 991

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.

Upvotes: 33

Related Questions