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

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

>
> 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.
>

If you're repeating this, then you have to use CSS animations, and you can set up the keyframes to only rotate for the second part of the animation.

Yes, but in order to do that, the inner animation has to know about the outer one. This get progressively more complicated the more animation are nested.
So:
Animation1
from { visibility:false}
23% { visibility:true; -transform: translate(0px, 0px);}
To { visibility:true; -transform: translate(200px, 0px);}
Duration: 13s

Animation2
from { visibility:false}
23% { visibility:true; -transform:rotate(0);}
To { visibility:true; - transform:rotate(720);} <- you need to calculate the angle
        Duration: 13s <- need to calculate the duration

If 'display' was supported this would become:
Animation1
from { display: none;}
23% {display: block; -transform: translate(0px, 0px);}
To { display: block; -transform: translate(200px, 0px);}
Duration: 13s

Animation2
from { -transform:rotate(0);}
To { - transform:rotate(720);}
Duration: 3s