Re: Are CSS animations a done deal?

--------------------------------------------------
From: "Anne van Kesteren" <annevk@opera.com>
Sent: Monday, April 05, 2010 9:07 AM
To: "www-style list" <www-style@w3.org>; "Lars Gunther" <gunther@keryx.se>
Subject: Re: Are CSS animations a done deal?

> On Mon, 05 Apr 2010 17:22:37 +0200, Lars Gunther <gunther@keryx.se> wrote:
>> 2010-04-05 11:08, Anne van Kesteren skrev:
>>> Personally I think moving away from specifying style information in
>>> script to just specifying class name changes is actually an improvement.
>>> That way the style information stays neatly separated from the script
>>> and can be changed by designers who might not be involved with the
>>> scripting layer of the site at all.
>>
>> What I am proposing, declarative animation in JS using JSON, looks very 
>> much like CSS, thus has a low barrier to learning.
>
> It also re-invents CSS syntax elsewhere for no good reason. It actually 
> has a higher barrier to entry for designers, who would need to learn 
> ECMAScript. It also fails to separate logic and style, by putting all 
> kinds of stylistic information in the scripting layer. E.g. colors, etc.
>
>
>> It is equally separated logic-wise and keeps all advantages of the 
>> current proposal.
>
> I disagree.
>

transitions is definitely a part of CSS but animations are doubtful.

Here is practical example (in script, sorry):

const STARTUP_SEQUENCE_DURATION = 800; // ms
const STARTUP_SEQUENCE_RULES = [
  { selector: "ul#category_list>li:nth-child(1)", start: 0 },  // un folding 
panels
  { selector: "ul#category_list>li:nth-child(2)", start: 30 },
  { selector: "ul#category_list>li:nth-child(3)", start: 60 },
  { selector: "div#footer button", start: 80, end:100 } ];  // group of 
buttons at the bottom
Sequence("startup", STARTUP_SEQUENCE_DURATION, STARTUP_SEQUENCE_RULES);

Function Sequence() here triggers set of transitions (defined in CSS) for 
various elements
of the DOM. As you see sequence  here is a group of *different* DOM 
elements, each of them
is running its own transition.  Current animation spec does not allow to 
define such group.

Example of transition defined in CSS:

ul#category_list>li
   {
      height:33%;
      opacity:1.0;
    }

    /* startup animation */
    ul#category_list>li[sequence="startup"][sequence-state="initial"]
    {
      overflow:hidden;
      height:0%;
      opacity:0.0;
    }
    ul#category_list>li[sequence="startup"][sequence-state="started"]
    {
      transition: height(linear, 0.4s,none)
                        opacity(quad-in, 0.4s,none);
    }

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Monday, 5 April 2010 16:48:37 UTC