Help with proposal

[L2L2L]

I'm currently proposing full support for CSS properties, and syntax. Please read the proposal below. This proposal is to the w3c web animation working group.

Excuse my rudness of posting this here. I do not know where else to go:

--------------My Proposal--------------

What I'm proposing is that you can be able to define the duration--things of that nature-- via CSS too:

Notice:

{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}

Under/beside the SYNTAX header below. This is my proposal, That it'll be optional to defined all animation via CSS properties and method-like functionalities.

Using CSS animation, CSS transition, CSS transform properties for more control, and varieties on how the animation will look, move, and act.

Also I believe this will make the TIMING VALUE optional to define with CSS properties instead of at the end of the function.

Also in syntax chooses via either CSS inclose in double/single quotes, or via JavaScript camel case style.

SYNTAX:

var anim = new Animation(
ELEMENT_NODE, 

[{CSS PRESENTATION PROPERTIES}], 

[{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],

TIMING VALUE);

----------------Example----------------
EXAMPLE:

var anim = elem.animate({ opacity: 0 }, 3000);

JavaScript syntax CSS optional version:

var anim = elem.animate(
{ opacity: 0 }, 
{animationDuration:"3s"});/* it could be just a short hand, but I would still express the un-short version both for readability and respect to CSS*/ 

CSS syntax optional version:

var anim = elem.animate(
{ opacity: 0 }, 
{"animation-duration":"3s"});

-----------------

// Specify multiple properties at once
var animA = new Animation(elem, { left: '100px', top: '300px' }, 3000);

JavaScript syntax CSS optional version:

var animA = new Animation(elem, 
{ left: '100px', top: '300px' }, 
{animationDuration: "3s"});

CSS syntax optional version:

var animA = new Animation(elem, 
{ left: '100px', top: '300px' }, 
{"animation-duration": "3s"});

---

// Specify multiple frames
var animB = new Animation(elem, 
[ { left: '100px' }, { left: '300px' } ], 
3000);

JavaScript syntax CSS optional version:

var animB = new Animation(elem, 
[ { left: '100px' }, { left: '300px' } ], 
{animationDuration: "3s"});

CSS syntax optional version:

var animB = new Animation(elem, 
[ { left: '100px' }, { left: '300px' } ], 
{"animation-duration": "3s"});

-----

elem.animate({ color: 'red' }, 2000);

JavaScript syntax CSS optional version:

elem.animate(
{ color: 'red' }, 
{animationDuration: "2s"});

CSS syntax optional version:

elem.animate(
{ color: 'red' }, 
{"animation-duration": "2s"});

MIX:

var anim = new Animation(
element_node, 
[{ left: "25px"},{left: "50px"}], 
{animation: "linear"}, //short hand
3000);

JavaScript/CSS syntax version:

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
{animation: "5s linear 2s infinite"}); /*all define in the short hand property; animation*/

---------End of example-------------

This will allow for more flexible, optional, and varieties of setting properties.

With setAttribute(); you define the style attribute via CSS syntax:

Node.setAttribute('style',
'animation-duration: 3s;
animation-timing-function:linear;
animation-delay: 2s;
 animation-play-state : infinite;');

 This will help with use case:

var anim = new Animation(
element_node, 
[{ left: "25px"},{left: "50px"}], 
{animation: "linear"}, //short hand
3000);

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
[{"animation-duration": "3s"},
{"animation-timing-function":"linear"},
{"animation-delay":"2s"},
 {"animation-play-state":"infinite"}]); 

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
[{animationDuration: "3s"},
{animationTimingFunction":"linear"},
{animationDelay":"2s"},
 {animationPlayState:"infinite"}]); 

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
{animation: "3s linear 2s infinite"});

With all the CSS properties and those to come plus the syntax familiarities.

This will help developers.

[alancutter]

Discussion taking place over in public-fx: http://lists.w3.org/Archives/Public/public-fx/2014JulSep/0102.html