0

I got this CSS code:

<style>
  div.indexCount {
    animation: counter 15s alternate ease-in-out;
    animation-fill-mode: forwards;
    counter-reset: num var(--num);
  }

  div.indexCount::after {
    content: counter(num);
    display: none;
  }

  @property --num {
    syntax: '<number>';
  }

  @keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 100000000000;
    }
  }
</style>

Which was supposed to allow me to have a nice counter animation from 0 to 100000000000.

Instead, it is going from 0 to only 2147483647.

Sounds to me like I've reached the limit of the number variable using CSS, or am I not? I thought it was the limits of Integers, not Number. I can't find anything in the specifications - is there a way to circumvent that ?

EDIT: To the people saying it's a duplicate, I have another usage, it's not about z-index, but about a CSS variable property. I want to find a way to circumvent my issue, please do not tag it as a duplicate gain.

iLuvLogix
  • 5,920
  • 3
  • 26
  • 43
sidney
  • 2,704
  • 3
  • 28
  • 44
  • answer is here http://www.w3.org/TR/CSS21/syndata.html#numbers – dippas Dec 10 '21 at 11:56
  • I read this page already @dippas. The max value is not defined. – sidney Dec 10 '21 at 12:05
  • From the answer linked on duplicated question `So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (−2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn't make sense to use anything less than 32 bits these days)`, meaning the limit It's the maximum value of a 32 bits integer – dippas Dec 10 '21 at 12:07
  • I'm not talking about z-index, please help me in reopening my question. I am talking about CSS properties. Z-index is an integer, not a number. This question is not a duplicate. Even if it is limited, there must be a solution to my issue somewhere, no way people animating haven't found a workaround. – sidney Dec 10 '21 at 12:13
  • 1
    Browsers have limited values in CSS to max value of a 32 bits integer, simple as that. – dippas Dec 10 '21 at 12:14
  • @dippas A nitpick might add that we are talking about the limitations of a signed 32 bits int (-2147483647 to 2147483647) - compared to an unsigned 32 bits int (0 to 4 294 967 295).. – iLuvLogix Dec 28 '21 at 12:12

0 Answers0