#s1 { animation: counter 3s  ease-in-out; counter-reset: num1 var(--num1); }
#s2 { animation: counter 4s  ease-in-out; counter-reset: num2 var(--num2); }
#s3 { animation: counter 3s  ease-in-out; counter-reset: num3 var(--num3); }
#s5 { animation: counter 3s  ease-in-out; counter-reset: num5 var(--num5); }
#s4 { animation: counter 5s  ease-out; counter-reset: num4 var(--num4); }


#s1::before{content: counter(num1); }
#s2::before{content: counter(num2); }
#s3::before{content: counter(num3); }  
#s4::before{content: counter(num4);}
#s5::before{content: counter(num5);}

#s1 { --num1:29; }
#s2 { --num2: 409; }
#s3 { --num3: 7; }
#s4 { --num4: 21500; }
#s5 { --num5:5; }

@property --num1 { syntax: "<integer>"; initial-value: 1; inherits: false;}
@property --num2 { syntax: "<integer>"; initial-value: 1; inherits: false;}
@property --num3 { syntax: "<integer>"; initial-value: 1; inherits: false;}
@property --num4 { syntax: "<integer>"; initial-value: 1; inherits: false;}
@property --num5 { syntax: "<integer>"; initial-value: 0; inherits: false;}

@keyframes counter {
  from {
    --num1: 1; 
    --num2: 1; 
    --num3: 1; 
    --num4: 1; 
    --num5: 0; 
  }
  to {
    --num1: 29;
    --num2:  409; 
    --num3:  7;
    --num4:  21500; 
    --num5: 5; 
  }
}