Re: Consider redefining The timing dictionaries

> On Aug 4, 2014, at 10:07 AM, "L2L 2L" <emanuelallen@hotmail.com> wrote:
> 
> 
> 
>> 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
> 
> ... Truth be told, yes. This is a correct summary. But after reading this, that is outrages. People have put time and effort into this. I was zeal about what I have type up to send to you editors... But reading this, not that was foolish. Let not change it, but let one also defined all via CSS properties:
> 
> 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.
> 

A couple of mistake on my proposal was just pointed out to me on GitHub:

All non-valid CSS properties name, let it either defined by it's just alternative name:

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

Or via string:

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

E-S4L