change css initial-value:x after ceratin time-CodePudding

im trying to figure out if there is a way to change initial-value: 0; of a property to 1 after a time delay in css.

img:hover works fine, but I want it to trigger after a time delay, not sure if it is possible

CodePudding user response：

To change a value like this it would be easiest to have a JavaScript function which executes.

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

Which is then called when an item is hovered upon.

CodePudding user response：

I have an image that has multiple masks on it that fade in when the value changes

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

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

...

so I would want the function to do this to all of them.

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