[css3-transitions] Multiple transition states and shorthand

• From: Alan Gresley <alan@css-class.com>
• Date: Thu, 03 Dec 2009 03:07:30 +1100
• To: CSS 3 W3C Group <www-style@w3.org>
• Message-ID: <4B1690C2.7040600@css-class.com>

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;
}


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;
}


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;
}


-- 
Alan http://css-class.com/

Received on Wednesday, 2 December 2009 16:08:20 UTC