Re: Consider redefining The timing dictionaries

> On Aug 4, 2014, at 8:55 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
>> On Sun, Aug 3, 2014 at 6:30 PM, L2L 2L <emanuelallen@hotmail.com> wrote:
>> Forgive me for any... Novice-ness. I'm just so zeal about this object coming to browsers.
>> 
>> And I feel that it's beautiful that it is combining CSS, SVG, RAF, etc w3c specs as possible to make this.
>> 
>> I feel strongly that utilizing what's already there can make this object stronger.
>> 
>> CSS working group is advancing with CSS properties and capabilities of what CSS can do; it'll be more beneficial to leverage off that as much as possible.
> 
> This email is super-long and kinda hard to read, so let me see if I
> can trim down your suggestions a bit.  Basically, you want Web Anim to
> copy the CSS syntax more exactly:
> 
> For the AnimationTiming dictionary, make it more like the
> corresponding CSS syntax:
> 
> * rename 'duration' property to 'animation-duration'
> * rename 'iterations' property to 'animation-iteration-count'
> * rename 'fill' property to 'animation-fill-mode'
> * rename 'direction' property to 'animation-direction'
> * rename 'delay' property to 'animation-delay'
> * rename 'easing' property to 'animation-timing-function'
> * add an 'animation' property that accepts a full CSS string of
> everything but animation-name, and represents all the other values
> correspondingly
> * for all the properties, support "initial" and "inherit" (and
> presumably "unset" and any other global keywords?)
> 
> For the AnimationPlayer methods, somehow convert the
> cancel()/finish()/play()/pause()/reverse() method into values for the
> CSS animation-play-state property, and make them apply to
> AnimationPlayer objects automatically.
> 
> Is this an accurate summary of your email?
> 
> ~TJ

No, not change, but let them be set via CSS properties too:

Syntax:

// the syntax on what I'm proposing

var anim = new Animation(
ELEMENT_NODE, 
[{CSS PRESENTATION PROPERTIES}], 
{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES},
TIMING VALUE);

Example:

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

/*the time value set the duration for everything, but I decided, that I would like for the left property to be one second faster and with an ease-in effect*/
var anim = new Animation(
element_node, 
[{ left: "25px" },{left: "50px"}], 
{transition: "left 2s ease-in"},
3000);
    
----
/*for the rest I use animation property*/

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

CSS version alternative way:

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

----

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

CSS version alternative way:

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);

CSS version alternative way:

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

-----

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

CSS version alternative way:

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

/* I desire to have the ability to defined the timing function, delay, etc with a CSS property too. But not take out anything, but let it be an option. Making the animation object this way, where it leverage largely from CSS property, --to me-- will make it more easier to learn, and work with.*/

Again, no change, just more freedom:

var anim = new Animation(
ELEMENT_NODE, 
[{CSS PRESENTATION PROPERTIES}], 
{CSS ANIMATION/
TRANSITION/ 
TRANSFORM PROPERTIES},
TIMING VALUE);

Please see the value you this, again not change anything(the animation object working group put forth all their effort to compose this master peace. Who am I to come in and say it's all wrong.), but let it just be possible to set the animation via CSS ANIMATION/ TRANSITION/ 
TRANSFORM PROPERTIES too.

In my email return, it kept the border style of the table I had paste into it. To make sure you convey my proposal, if necessary, I can go back and space everything out, to where it's easier to read.

E-S4L