[css3-animations] or?

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

Received on Sunday, 17 April 2011 23:04:31 UTC