如何 运行 加载动画 CSS

Question

如何在加载时启动计数器？我能够让它在悬停时启动，但从未让它在加载时工作。

JS:

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var start= rootStyles.getPropertyValue('--start');
var finish= rootStyles.getPropertyValue('--finish');
//function witch gives data for this values
root.style.setProperty('--start', +storedelo-300);
root.style.setProperty('--finish', +storedelo);

CSS:

:root {
    --start: 0;
    --finish: 0; 
  }
@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
 div {
   transition: --num 5s;
   --num: var(--start);
   counter-set: num var(--num);
 }
 div::after {
   content: counter(num);
 }
 div::hover {
   --num: var(--finish);
 }

@keyframes 因某些原因无法正常工作

@keyframes counter {
  from {
    --num: var(--start);
  }
  to {
    --num: var(--finish);
  }
}

Answer 1

您可以创建一个函数来设置 CSS 变量的初始值，然后在 window DOMContentLoaded (MDN documentation) or window load MDN Documentation

上调用它

var root = document.querySelector(":root");
var rootStyles = getComputedStyle(root);
var start = rootStyles.getPropertyValue("--start");
var finish = rootStyles.getPropertyValue("--finish");
//function witch gives data for this values

function startCounter() {
  root.style.setProperty("--start", +storedelo - 300);
  root.style.setProperty("--finish", +storedelo);
}

window.addEventListener("DOMContentLoaded", (event) => {
    startCounter();
});