Time props

[DamianDab]

Hi,

Have you thought about adding some time-related variables? I wonder if it would be cool to have something like this here.

I was thinking about something like:

:where(html) {
--duration-1: 50ms;
--duration-2: 100ms;
...

--delay-1: var(--duration-1);
--delay-2: var(--duration-2);
...
}

or maybe more descriptive:

:where(html) {
--duration-fast-1: 50ms;
...
--duration-moderate-1: 150ms;
...
--duration-slow-1: 250ms;
...
--delay-fast-1: var(--duration-fast-1);
...
--delay-moderate-1: var(--duration-moderate-1);
...
--delay-slow-1: var(--duration-slow-1);
...
}

Second approach could be little bit tricky because It might be hard to define where fast time ends and where moderate starts.
I am just leaving this idea as a part of potential disscussion.

[argyleink]

very nice, great discussion item!

the idea of a fixed set of durations could be nice, agree there's usually less than 5 in most apps, though i count at least 8 unique durations in the OP source

the fast or slow props, those look like "house props" to me because they're descriptive and subjective, fast to one team might be slow to another type of thing.

tldr; i'm not sure! my gut says OP doesnt need these, but i think it's worth thinking exploring and discussing further 🙂

[DamianDab]

Fully agree with that "house props" and all those slow, fast naming.
Actually, this is something that I am going to change in our project that I am working on with my team. This idea didn't work out a bit.

Working with set of durations I found one useful thing (of course doesn't mean that it will be useful here).
When some other team want to change animations time a bit. One time some team wanted to have more energetic animations, another time - another team want to have more lazy. The idea is to do it by one property (timebase).

:root {
--timebase: 25ms;

--duration-1: calc(var(--timebase) * 4);
--duration-2: calc(var(--timebase) * 6);
}

I just want to share that idea, maybe somebody will find it useful as well.