Re: [css-variables] Remaining Issues

On 19 June 2013 09:34, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Tue, Jun 18, 2013 at 12:16 PM, Lea Verou <lea@w3.org> wrote:
> > On Jun 10, 2013, at 21:54, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> >> There are three remaining issues on the Variables spec.
> >>
> >> 1. Animation behavior.  Should custom properties animate/transition
> >> like normal properties (always being unrecognized, so they flip at 50%
> >> progress), or not?  François pointed out that allowing them to be
> >> animated can produce dependency loops in animations, where the
> >> animation property itself uses a variable which it animates over.  I'm
> >> thinking we should disallow animation/transition of custom properties
> >> - they don't transition at all, and they're ignored in @keyframes
> >> rules.
> >
> > I think it’s very useful to animate custom properties, since it allows
> somebody to have synchronized animations for different properties e.g. text
> color and border-color. I’ve actually needed this. So, I think it’s worth
> trying to find a solution to this rather than just disallowing animation
> for custom properties. Would it be technically possible to say that var()
> fetches the cascaded value of the custom property *ignoring* any animation
> on it? Or, to detect such cycles and render the declaration invalid?
>
> While I agree in general that it would be useful to be able to animate
> custom properties, they won't do what you want right now - animating
> from "var-foo: red;" to "var-foo: blue;" will just flip the value from
> "red" to "blue" halfway through the transition progress, rather than
> doing a color fade, because there's no way to tell that it's supposed
> to be a color.
>

Just to be clear here: Properties using var() will still be animatable and
the transition will be smooth (as far as I understand), so most use-cases
will already be covered anyway.
To stick with the example above: "color: var(foo);" will fade between red
and blue.

The use-case for animating custom properties is to animate parts of normal
properties like "transform: rotate(var(rotation)) skewX(var(skew));"
individually.

Little unrelated question:
It seems the standard also allows to have functions as custom property
values, e.g. "transform: var(transform-function1)
var(transform-function2);"? Is that correct?

Sebastian