Re: [css3-animations] or?

On 18/04/2011 11:57 AM, Tab Atkins Jr. wrote:
> On Sun, Apr 17, 2011 at 4:04 PM, Andrew Fedoniouk
> <andrew.fedoniouk@live.com>  wrote:
>> As soon as we have transitions/animations...
>> Are we going to introduce something like scenarios (or extend animations)
>> to support group transitions like above?
>
> This seems like the sort of thing that is perfectly suited for
> javascript rather than CSS.  With better APIs for producing,
> triggering, and composing animations in JS (which I expect to show
> up), this'll be easy to accomplish.
>
> ~TJ


I like the concept of animation groups. the firing of animations should 
not have to be only achieved via JS. Currently well timed keyframes on 
different elements can allow quite amazing animations. The effects I'm 
talking about are animations where one can have a perception of camera 
(viewers perspective) movement and panning that is seen with <canvas>. 
This movement and panning of a camera (viewers perspective) done with 
CSS animation and JS controls has been achieved in this demo [1].

The drawback with well timed keyframes on different elements is the 
animation itself (or multiple animations) is of specific time periods 
where the keyframes only allow values ranging from 0% (from) to 100% 
(to). To create a long animations (split up in groups), one has to query 
via JS when one animation has ended before another animation can be 
triggered by JS.

I am seeing two ways around this using just CSS.

   Example 1:

     @keyframes name {
       0s   { ... }
       10s  { ... }
       20s  { ... }
       30s  { ... }
       40s  { ... }
       50s  { ... }
     }

   By mixing certain keyframes, one could have this.

     @keyframes clip1 {
       0s   { ... }
       10s  { ... }
       20s  { ... }
       30s  { ... }
       40s  { ... }
       50s  { ... }
     }

     @keyframes clip2 {
       0s   { ... }
       10s  { ... }
     }

     @keyframes clip3 {
       10s  { ... }
       30s  { ... }
       40s  { ... }
     }


   When each keyframes has reached it's last time period, that animation 
ends.


   Example 2:

     @keyframes-group {
       name(clip1)  { out }
       name(clip1)  { spin }
       name(clip3)  { jump }
     }


     #clip1 { /* animation for 'out' */
       animation-duration: 50s;
       animation-iteration-count: 1;
       animation-timing-function: linear;
     }

     @keyframes out {
       from { ... }
       20%  { ... }
       40%  { ... }
       60%  { ... }
       80%  { ... }
       to   { ... }
     }


These methods would make it a lot easier to create long animations. 
Currently I am having to play animations for over many seconds or even 
minutes to see the results of something that occurs at say 70 seconds. 
Being able to use either of the above methods would mean that an author 
can test one sequence (clip) of a larger animation.



Alan

-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 18 April 2011 11:21:38 UTC