Re: [css3-transitions] transitioning a shorthand

On Jul 5, 2010, at 5:38 am, Anne van Kesteren wrote:

> Currently per http://dev.w3.org/csswg/css3-transitions/ certain shorthand properties such as 'margin' cannot be transitioned. This causes the sliding effect on http://slides.html5rocks.com/ to break in Opera as apparently transitioning the 'margin' shorthand does work in WebKit (reportedly also in Gecko nightlies, but I could not get the site to work) and why it failed in Opera was not evaluated or maybe not even tested. Given that properties can evolve in shorthand properties over time and that certain shorthand properties such as 'border-width' are already included I think we should add those shorthand properties (including 'margin') that are missing.

I added transitioning of shorthands to WebKit, so I think this is a good idea.

Note that the spec currently says:

"a shorthand property: If all the parts of a shorthand can be animated, then interpolation is performed as if each property was individually specified."

but I don't think this is correct.

The way WebKit implements this is if *any* part of a shorthand can be animated then it will be, and this works both ways. If the transition property itself specifies a shorthand, then we animate all individual animatable properties included in that shorthand. If the transition property specifies an individual property, and that property is changed via shorthand property rules, then we also animate that.

Here are some examples. First, transition-property set to a shorthand:

div {
  transition: border 1s;
  border: 1px solid red;
}
div.changed {
  border-width: 10px;   /* border-width will animate */
}
div.changed2 {
   border: 10px dashed green; /* border-width and border-color will animate */
}

Then, transition-property set to an individual property, but shorthands are changing:

div {
  transition: border-left-width 1s;
  border: 1px solid red;
}
div.changed {
   border: 10px dashed green; /* left border width animates, others properties snap  */
}

I'll fix the wording in the spec to reflect this.

Simon

Received on Monday, 5 July 2010 16:15:13 UTC