W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: [css3-transitions] display properties missing; delay property unclear

From: Simon Fraser <smfr@me.com>
Date: Fri, 21 Jan 2011 10:32:23 -0800
Cc: "Belov, Charles" <Charles.Belov@sfmta.com>, www-style list <www-style@w3.org>
Message-id: <5B8A2EAA-A5E7-4EB5-9789-74AEFA27CDD8@me.com>
To: Rik Cabanier <cabanier@adobe.com>

On Jan 21, 2011, at 10:21 AM, Rik Cabanier wrote:

> It would be really nice if ‘display’ could be part of a transition/animation.
> ‘display’ allows you to do more interesting things because of the way sub-animations are handled.
>  
> Ie let’s say you want to move a box from left to right over a duration of 10s but with a delay of 3s and you want to repeat this.
> So: invisible for 3s and then animate from left to right for 10s.
> This box will also have a subanimation that rotates it over 5s. (I know you could collapse the 2 states but this is a simplified example)
>  
> Currently there is no way to do this with css without resorting to JavaScript.
> The reason is that you need to set visibility to false/true to hide/display the box, but this does not stop the rotation from starting at time 0.
> By the time the box is visible, it would already be partly rotated.
>  
> By having ‘display’ as part of the keyframes, the subanimation wouldn’t start until the box had the property ‘display: block’
> 

You could use transition-delay to delay the rotation part.

Simon
Received on Friday, 21 January 2011 18:33:43 GMT

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