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

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