Re: [css3-animations] or?

On Mon, Apr 18, 2011 at 4:21 AM, Alan Gresley <alan@css-class.com> wrote:

> 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.
>

Your proposal is about making the CSS easier to author, correct?
You can already create these long animations with very long keyframes
today...


>
> 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.
>
>
WebKit's proposed scrubbing APIs will be very useful since they will let you
fast forward, pause and rewind animations.

Rik