I’ve studied calc(expression)
function, I can use <length>
,<frequency>
<angle>
,<time>
or <percentage>
together inside the function, but
what happens if for example I need to set transition-delay where a <time>
is needed, so I use calc() function in this way calc(2px - 3s)
, 2px is a length, 3s is time, how css resolves this calculation when the data types are so differents?.
While you can use any of those kinds of data types inside calc()
, they need to be able to resolve to a real computed value.
So something like width: calc(100% - 2px - 0.5rem)
will make sense, as all those data types resolve to pixels in the final computed value.
But something like transition-delay: calc(2px - 3s);
won’t work — the don’t resolve to the same computed value, so it doesn’t make sense.
You could use calc()
with transition delay
like this — say you wanted to define a minimum delay offset that all transitions have, and then add to that as required? See this example:
:root {
--delay-offset: 2s;
}
a:link {
...
transition-delay: calc(var(--delay-offset) + 3s)
}
1 Like