W3C home > Mailing lists > Public > www-style@w3.org > December 2009

[css3-transitions] Multiple transition states and shorthand

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

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:22 GMT