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

Re: [css-animation] animation-fill-mode and animation groups

From: Alan Gresley <alan@css-class.com>
Date: Sat, 04 Jun 2011 00:33:56 +1000
Message-ID: <4DE8F0D4.70005@css-class.com>
To: Boris Zbarsky <bzbarsky@MIT.EDU>
CC: www-style@w3.org
On 3/06/2011 10:56 PM, Boris Zbarsky wrote:
> On 6/3/11 4:27 AM, Alan Gresley wrote:
>> I tried to create a Gecko friendly script for the same demo but I could
>> not find the correct documentation that works with Aurora.
>>
>> https://developer.mozilla.org/en/DOM/Event/AnimationEvent
>
> This works fine in Gecko if you just do the standard prefix replacements:
>
> s/-webkit/-moz/
> s/style\.webkit/style.Moz/


Thank you Boris. I did use 'style.moz' but I didn't know that the 'm' 
should be capitalized. Here is the same animation now working in Aurora.

http://css-class.com/test/css/3/2d-animation/swap-via-script-roll-moz.htm


> In any case, why do you need JS here, exactly? Just to respond to the
> user clicks? That is you _want_ the next turn to only happen on click?
>
> -Boris


I would actually like it to work without any clicks. I am presuming from 
much experimentation that currently this type of animation impossible.

The property animation-fill-mode does one thing which allows this type 
of animation to somewhat work and that is that it drops (for lack of 
better expression) that an element has been rotated by 90 degrees. Even 
though the same rotation is always used, the JS used to select can not 
use the same animation.

The pertinent CSS is this.

#element {
   width: 150px;
   height: 150px;
   -moz-animation: 3s;
   -moz-animation-fill-mode: forwards;
   -moz-transform-origin: bottom right;
}


@keyframes turn1 {
	from { transform: rotate(0deg); }
	to { transform: rotate(90deg); }
}
@keyframes turn2 {
	from { transform: rotate(0deg); margin-left:150px; }
	to { transform: rotate(90deg); margin-left:150px; }
}
@keyframes turn3 {
	from { transform: rotate(0deg); margin-left:300px; }
	to { transform: rotate(90deg); margin-left:300px; }
}
@keyframes turn4 {
	from { transform: rotate(0deg); margin-left:450px;}
	to { transform: rotate(90deg); margin-left:450px; }
}


This becomes more complicated as one get into a chain of animated 
events. If you deviate on the path, you have to track back through the 
chain. Before long, you are having to insert and pull out a lot of 
different buttons. If I could have this chain dropped, animation could 
be far more powerful. Hopefully this make sense. I it doesn't I working 
on a demo that will give a good example of this.


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Friday, 3 June 2011 14:34:24 GMT

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