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

> The timing of the rotation is easy to achieve if the inner box completes 
> full rotations to be upright (12 o'clock) at the end of it transform 
> where it becomes hidden.

That is exactly the problem.
What if the translation duration is not a multiple of the rotation duration? It becomes impossible to keep the 2 in sync and you end up having to combine the 2 animations.
Having 'display' as part of the keyframes would enable this since it will hold the nested animations until the parent animation has 'display: block'

> @-webkit-keyframes move {
>   from { left: 0; visibility: hidden; }
>   25% { left: 0; visibility: hidden; }
>   to { left: 80%; visibility: visible; }
> }

Interesting. 
Will the following hide the last keyframe?
@-webkit-keyframes move {
   from { left: 0; visibility: hidden; }
   25% { left: 0; visibility: hidden; }
   50% { left: 80%; visibility: visible; }
   to { left: 80%; visibility: hidden; }
}

I wonder how 'visibility' is defined to transition...

Rik

-----Original Message-----
From: Alan Gresley [mailto:alan@css-class.com] 
Sent: Saturday, January 22, 2011 9:38 PM
To: Rik Cabanier
Cc: Belov, Charles; www-style list
Subject: Re: [css3-transitions] display properties missing; delay property unclear

On 23/01/2011 6:14 AM, Rik Cabanier wrote:

> Hi Alan,
>
> Notice how the box doesn't start at rotation 0. What I want is for it 
> to start rotating when it becomes visible. It also seems that you're 
> cheating a bit by moving the box off screen:


Yes. I normally hack things in the beginning in the process of learning. 
I couldn't quite get the visibility to work at this stage and my maths was wrong.


> @-webkit-keyframes move {
>    from {left: -10000px;}
>    25%  {left: 0;}
>    to {left: 80%;} }
>
> It would
> be better to use the visibility attribute.


Yes, I'm still attempting to find good documentation so I was winging it 
but I have now discovered that to make the visibility work (as in the 
example you gave), the second keyframe must be set to hidden and not 
visible as I initially presumed. This works.

@-webkit-keyframes move {
   from { left: 0; visibility: hidden; }
   25% { left: 0; visibility: hidden; }
   to { left: 80%; visibility: visible; }
}


Another issue which I couldn't work around at first was that if the 
'from' keyframe is set at a negative value (only tested absolute units), 
then a percentage value can not be used. This does not work,

@-webkit-keyframes move {
	from {left: -10000px; visibility: hidden;}
	25% {left: 10%; visibility: hidden;}
	to {left: 80%; visibility: visible;}
}

where this does.

@-webkit-keyframes move {
	from {left: -10000px; visibility: hidden;}
	25% {left: 0; visibility: hidden;}
	to {left: 80%; visibility: visible;}
}


> If 'display' was
> supported, the box would start rotating at 25% and would also start
> there again regardless of the rotation it stopped at.
>
> Rik


The timing of the rotation is easy to achieve if the inner box completes 
full rotations to be upright (12 o'clock) at the end of it transform 
where it becomes hidden.

I have revised the demo, please view in Safari.

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


If you want to begin the degree of rotation (45% clockwise) from where 
it became hidden to be the same degree of rotation (45% clockwise) when 
it becomes visible again, I don't have the answer or solution for you.


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

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Monday, 24 January 2011 03:47:01 UTC