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

Re: [css3-animations] or?

From: Rik Cabanier <cabanier@gmail.com>
Date: Sun, 17 Apr 2011 21:43:43 -0700
Message-ID: <BANLkTimMAF4EJNAq1sv6Z9AgwbKD=Nr4JQ@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: www-style@w3.org
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
>
>
Received on Monday, 18 April 2011 04:44:11 GMT

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