Search code examples
htmlcsssafaricountermobile-safari

CSS counter up @property in Safari

My counter up css code doesn't work on Safari (mobile: 12.4.9, desktop: Mojave). I am trying hard NOT TO USE javascript. Can you help?

My code

@property --num{syntax:"<integer>";initial-value:300;inherits:false}
.c300{animation:counter 29s ease-in-out;counter-reset:num var(--num)}
.c300::after{content:counter(num)}
@keyframes counter{from{--num:0}to{--num:300} }
<div>
<h3 class="c300"></h3>
<p>total</p>
</div>

Solution

  • It turns out that this is an experimental technology. Not yet supported by Firefox and Safari.