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

[css3-animations] or?

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Sun, 17 Apr 2011 16:04:01 -0700
Message-ID: <BLU159-ds4A0492B9BEDB3AF632214F8AE0@phx.gbl>
To: <www-style@w3.org>
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 GMT

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