change css initial-value:x 在一定时间后

Question

我正在尝试弄清楚是否有办法更改初始值：0；属性在 css.

的时间延迟后变为 1

img:hover 工作正常，但我希望它在延时后触发，不确定是否可能

Answer 1

要像这样更改值，最简单的方法是执行 JavaScript 函数。

function setValue() {
    setTimeout(() => { 
        document.getElementById(<element id>).style.property = 1;
    }, <time in milliseconds>);
}

当鼠标悬停在项目上时调用。

Answer 2

我有一个图像，上面有多个遮罩，当值改变时会淡入

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

@property --c-0-1 {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

...

所以我希望函数对所有这些都执行此操作。

img {
--c-0-0: <change from 0 to 1 after 500ms>;
}

change css initial-value:x 在一定时间后

change css initial-value:x after ceratin time

css

triggers

properties