W3C home > Mailing lists > Public > www-style@w3.org > March 2011

Re: Additivity Was: transitions vs. animations

From: Brian Kardell <bkardell@gmail.com>
Date: Mon, 7 Mar 2011 11:50:35 -0500
Message-ID: <AANLkTik5rdjp8F6y4vykt1beAVvfQWNGTGk_bxJEpg9J@mail.gmail.com>
To: www-style@w3.org
I haven't seen any follow up on this discussion of additivity, but I think
this is related.  I've spent a long time running through the archives and
thinking about something related and I have a question.  Given the existing
way it's spelled out, you can do this with transitions:

    transition-property: height, opacity;
    transition-duration: 2s;

or even:

    transition-property: height, opacity;
    transition-duration: 2s, 2s;

There are pretty good resolution specifications in there that appear to
follow other standard approaches in other CSS properties as to what it means
when properties are bad or repeated or the number of durations doesn't
match, etc...

Typically the next matching rule would essentially overwrite the value of
that property.  However, CSS allows you to do some great things in other
areas like use percentages which operate off the calculated value (I think
that's the right term)...

So here's my question... If it is possible to have such good resolution
specifications - and since those properties are kind of 'array-like' (they
almost seem like they should be plural), why can CSS not allow something
like an additive notation so that given the rules (I am using '+' in the
example, but that's just off the top of my head and unimportant to the

/* standard - set the two properties */
.x {
    transition-property: height;
    transition-duration: 2s;

/* push one more onto the list of transitioned properties */
.y {
    transition-property: +opacity;

/* push one more onto the list of transitioned properties and
   one more onto the list of transitioned durations */
    transition-property: +width;
    transition-duration: +4s;

<div class="x">Standard</div>
<div class="y">Opacity transitions over 0 seconds (initial value)</div>
<div class="z">Height transitions over 2 seconds (initial value)</div>
<div class="x y"> Height and opacity transition over 2s</div>
<div class="x z"> Height transitions over 2s, width transitions over

It seems kind of logical to think that if you _can_ express it as a list of
values, it shouldn't be hard to 'push' onto the list...

The only potential confusion I can think of is in adding to durations which
don't match the properties, for example:

    transition-property: height, width, left;
    transition-duration: 2s, 1s;

    transition-property: +opacity, top;
    transition-duration: +3s;

In the case where something was x and y it would probably be pushing onto
the expanded list (2s, 1s, 2s, 1s) to avoid confusion...But that's sort of
how most calculations work in CSS I think anyway...

Thoughts?  Is it clear what I am asking?
Received on Monday, 7 March 2011 16:51:07 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:57 UTC