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

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 UTC