如何将CSS3 hover触发的数字计数器改为页面加载触发并停在100

解决方案 #

仅需调整CSS触发规则即可实现需求，无需修改HTML结构，修改后的完整代码如下：

调整后CSS代码

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

div {
  --num: 100;
  transition: --num 5s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
div::after {
  content: counter(num);
}

body {
  margin: 2rem;
}

调整后HTML代码

<div></div>

修改说明 #

1. 删除了原代码中div:hover的悬停触发规则，直接在div的基础样式中设置--num: 100
2. 页面加载时浏览器会识别到自定义属性--num从@property定义的初始值0变为设定值100，自动触发过渡动画
3. 动画结束后--num会固定为100，没有其他修改该属性的触发条件，数值不会回退到0

低版本浏览器兼容方案 #

如果需要兼容不支持CSS @property语法的旧版浏览器，可以改用CSS动画实现，效果完全一致：

div {
  counter-reset: num 0;
  font: 800 40px system-ui;
  animation: countUp 5s forwards linear;
}
div::after {
  content: counter(num);
}
@keyframes countUp {
  to {
    counter-reset: num 100;
  }
}
body {
  margin: 2rem;
}

内容的提问来源于stack exchange，提问作者Samtech