Re: [css3-transitions] Multiple transition states and shorthand

On Wed, Dec 2, 2009 at 10:07 AM, Alan Gresley <alan@css-class.com> wrote:
> Very nice spec.
>
> Getting my head around the syntax, is this a valid example?
>
> div {
>  background-color: blue;
> }
>
> div:hover {
>  transition-property: background-color;
>  transition-duration: 1s;
>  background-color: green;
> }

Yes, though probably not of what you want.  In this example, the
transition only applies *while* the div is hovered.  So it'll
instantly go from blue to green, then transition from green back to
blue over 1s.  If you want it to always transition, put it in a
selector-block that always matches.

> Now my questions.
>
> 1. Can we have multiple transitional states? Supposed I want the background
> blue and after a :hover event, the background color changes first to green
> and secondly to yellow. An example.
>
> div:hover {
>  transition-property: background-color;
>  transition-duration: 1s;
>  background-color: green;
>  transition-duration: 2s;
>  background-color: yellow;
> }

Not with transitions.  I think that's possible with the animations
spec?  That's a lot less stable, though, and much more complex.

> 2. Can I set background in shorthand for the initial state and then change
> particular values for the longhand properties on transition? This is what I
> presume is the *keypath syntax* in the spec. An example.
>
> div {
>  background: blue url(image.png) 50% 10px;
> }
>
> div:hover {
>  transition-property: background-color, background-position;
>  transition-duration: 1s, 2s;
>  background-color: green;
>  background-position: 50% 20px;
> }

Yes, again assuming that the transition-* properties are on the previous block.

The bit about 'keypath syntax' is a note about future support for
animating separate parts of *compound* properties; it doesn't apply to
shorthand properties.  (Compound properties are things like
text-shadow that have multiple bits, but there aren't any properties
for those individual bits themselves.  Shorthand properties are ones
that *do* have properties for the individual bits.)

For example, background-position is a compound property.  You can't
give different animations to the horizontal and vertical components
right now - they have to animate together.  But background is just a
shorthand, so you *can* do so.

~TJ

Received on Wednesday, 2 December 2009 16:45:09 UTC