css 의 animation 을 확장하기 (css @property)

https://css-tricks.com/animating-number-counters/

 

 

@property, counter-reset, counter()

/* body { background-color: black; } */

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}


#foo {
  
  transition: --num 20s;
  counter-reset: num var(--num);
  
}
#foo:hover {
  --num: 100000000;
}
#foo::after {
  content: counter(num);
}