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 Sunday, 23 January 2011 05:38:12 UTC