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

问题描述

正如您在此简单的CSS计数器中看到的那样，https://codepen.io/bgbos/pen/pobZvwJ我们有4个div，每个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 我正在尝试编辑。

很抱歉，如果有错误，请刚入门。感谢您的帮助。

解决方法

该值必须在元素内部，并且您的代码可以简化如下：

#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>