Re: [css3-animations] or?

There was a discussion on this named '[css3-animations] Complex
animations' where we discussed a possible solution that would address your
question.

I agree with Tab that if you want an animation drive this through JS, the
new WebKit APIs and the animation event will be the way to go.
However, if you know in advance how the animation will run (and you never
want to change it), it would be nice if you could just describe it as a
style.

Rik

On Sun, Apr 17, 2011 at 4:04 PM, Andrew Fedoniouk <andrew.fedoniouk@live.com
> wrote:

> Here is a screenshot in the middle of transition/animation
> http://www.terrainformatica.com/w3/transitions1.png
>
> That is a list of items
>
> <ul>
>  <li>...</li>
>  <li>...</li>
>  ...
> </ul>
>
> at the end of animation the list looks like this:
> http://www.terrainformatica.com/w3/transitions2.png
>
> Styles are defined as
>
>     ul.panel > li
>     {
>       background-color:rgba(255,255,255,0.0);
>       color:rgba(0,0,0,0.0);
>       transform:translate(100px,0);
>     }
>
>     ul.panel > li.shown
>     {
>       color:rgba(0,0,0,1.0);
>       background-color:rgb(255,255,255);
>       transform:translate(0px,0);
>       transition: transform cubic-out 0.5s,
>                        background-color linear 1s,
>                        color linear 1s;
>     }
>
> And there is a script that on timer event assigns .shown class to
> list items one by one.
>
> In other words this script does something like this:
>
>  transition-delay: calc( this.index * 30ms );
>
> The question:
>
> As soon as we have transitions/animations...
> Are we going to introduce something like scenarios (or extend animations)
> to support group transitions like above?
>
> Or even aggregated transitions like:
>
> @keyframes animation-1 {...}
>
> @keyframes animation-group
> {
>  ...
>  40% { start(selector(some.other) animation-1); }
>  ...
> }
>
> That means on 40% of 'animation-group' it will start animation-1 on some
> other
> element.
>
> Or is it too much?
>
> --
> Andrew Fedoniouk
>
> http://terrainformatica.com
>
>