如何对超过 1 个 div 使用相同的 @keyframes 和 @属性 两次？

Question

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

这是原版，效果很好，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>