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

That doesn't work because the rotation would continue into the second iteration.
The output would look correct the first time, but then the box would start rotating.

Rik