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

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

From: Alan Gresley <alan@css-class.com>
Date: Sat, 22 Jan 2011 23:44:10 +1100
Message-ID: <4D3AD11A.8030706@css-class.com>
To: Rik Cabanier <cabanier@adobe.com>
CC: "Belov, Charles" <Charles.Belov@sfmta.com>, www-style list <www-style@w3.org>
On 22/01/2011 5: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'
>
> Rik


Mmm. Ok, firstly I need to practice animation. Secondly, nothing is 
close to impossible it seems. I just don't know if it's possible to make 
it non visible at different keyframes.


<http://css-class.com/test/css/3/transform-rotation-rolling.htm>


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Saturday, 22 January 2011 12:45:44 GMT

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