html - 如何对超过 1 个 div 使用相同的@keyframes 和@property 两次？

Question

正如您在这个简单的 css 计数器中看到的那样，https://codepen.io/bgbos/pen/pobZvwJ我们有 4 个 div，每个都有不同的初始值，它必须出现在动画结束时，但它没有，它都停在一个值上

这是原始的，具有良好的值(value)，CSS 和 HTML

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

#twitter {
  animation: counter 3.9s infinite alternate ease-in-out;
  animation-iteration-count:1;
  counter-reset: num var(--num);
  
  
}
#twitter::before {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 100;
  }
}



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

#instagram {
  animation: counter 3.9s infinite alternate ease-in-out;
  animation-iteration-count:1;
  counter-reset: num var(--num);
  
  
}
#instagram::before {
  content: counter(num);
}


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

#facebook {
  animation: counter 3.9s infinite alternate ease-in-out;
  animation-iteration-count:1;
  counter-reset: num var(--num);
  
  
}
#facebook::before {
  content: counter(num);
}



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

#youtube {
  animation: counter 3.9s infinite alternate ease-in-out;
  animation-iteration-count:1;
  counter-reset: num var(--num);
  
  
}
#youtube::before {
  content: counter(num);
}

<div id="twitter" ></div>
<div id="instagram" ></div>
<div id="facebook" ></div>
<div id="youtube" ></div>

https://codepen.io/CarterLi/pen/NWNJvPE 我正在尝试编辑。

新手如有错误请见谅。感谢您的帮助。

Answer 1

值需要在元素内部，您的代码可以简化如下:

#twitter,
#instagram,
#facebook,
#youtube{
  animation: counter 3.9s  ease-in-out;
  counter-reset: num var(--num);
}

#twitter::before,
#instagram::before,
#facebook::before,
#youtube::before{
  content: counter(num);
}

#twitter { --num:984; }
#instagram { --num:402; }
#facebook { --num:254; }
#youtube { --num:610; }

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

@keyframes counter {
  from {
    --num: 0;
  }
}

<div id="twitter" ></div>
<div id="instagram" ></div>
<div id="facebook" ></div>
<div id="youtube" ></div>