change css initial-value:x after ceratin time

Question

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

Answer 1

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>;
}