[css3-transitions] Transitioning shorthands

In 2.1 The transition-property Property [1], transitioning shorthands is defined thus:

# If one of the identifiers listed is not a recognized property name or is not an 
# animatable property, the implementation must still start transitions on the 
# animatable properties in the list using the duration, delay, and timing function 
# at their respective indices in the lists for 'transition-duration', 
# 'transition-delay', and 'transition-timing-function'. In other words, unrecognized 
# or non-animatable properties must be kept in the list to preserve the matching of indices.

Thus, when transitioning from:

     background: url(a.png) repeat-y 20px 0px;

To:

     background: url(b.jpg) repeat-x 0px 40px;

I would expect the background-position sub-property to transition while background-image and
background-repeat do not since they are not animatable.

In '6. Animation of property types' [2], we have :

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

Which could be interpreted as saying that shorthands only animate if all their parts can
animate. 

My understanding is that 2.1 (transition the animatable parts, keep the rest in their initial
state) is the intended behavior. Firefox and Chrome agree.


[1] http://dev.w3.org/csswg/css3-transitions/#the-transition-property-property-
[2] http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types-

Received on Monday, 4 April 2011 16:07:51 UTC