:) First of all - sory for my English. Second of all - I have an issue or puzzle. I want to make animation spans with relation time between them. There is the simple code:
span.one { transition: transform 1s ease-out; } /*duration 1s delay 0s*/
span.two { transition: transform 1s ease-out 1s; } /*duration 1s delay 1s*/
span.three { transition: transform 1s ease-out 2s; } /*duration 1s delay 2s*/
So each span appear one by one and it's look ok. Every next element is animated in delay of value duration (let's get name 'time-op'). So if I change values from second to my class 'time-op' it will be like:
span.one { transition: transform time-op ease-out time-op*0; }
span.two { transition: transform time-op ease-out time-op*1; }
span.three { transition: transform time-op ease-out time-op*2; }
If I root my 'time-op' by :root at the beginning of my file, can I multiply this value as I described it above? For example:
span.three { transition: transform var(--time-op) ease-out var(--time-op)*2; }
I know this is available in JavaScript, but maybe there is a way in ONLY CSS :)
Use calc() function in CSS:
span.one { transition: transform time-op ease-out calc(time-op * 0) }