W3C home > Mailing lists > Public > www-style@w3.org > November 2010

Re: [css3-transitions] Query about the order of animations in a transition on multiple properties

From: Simon Fraser <smfr@me.com>
Date: Thu, 25 Nov 2010 19:18:49 -0800
Cc: www-style@w3.org
Message-id: <2D2EF02D-3FB4-4EEC-A66C-004D82871A88@me.com>
To: T D <codekiller66@gmail.com>
On Nov 3, 2010, at 3:35 am, T D wrote:

> Dear Sir/Madam,
> 
> I've studied the CSS Level 3 Transitions Module provided on the W3C.org site, and I have a question about it.
> 
> If I specify transitions on multiple properties, say height, then width, then opacity, in that order with each successive property being made to wait (via the delay property) before occurring, and if those effects are fired with the :hover pseudo-class, then is there a way, within CSS3 itself, to reverse the order of properties transitioned when the user moves the mouse away from the element.
> 
> Using transition, the order would be height width opacity on hover, and height width opacity on mouse out. Is there a way to have it height width opacity on hover, and opacity width height on mouse out? It would make it seems more like a reversal of the animation, than a restart of the same animation in the other direction.


div {
  transition-property: height, width, opacity;
  transition-duration: 2s;
  transition-delay: 0.8s, 0.5s, 0.3s;
}

div:hover {
  transition-delay: 0.3s, 0.5s, 0.8s;
}

Simon
Received on Friday, 26 November 2010 03:19:37 GMT

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