Consider redefining The timing dictionaries

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.  

I'm copying and pasty here:

Controlling the animation timing

TimingDictionaries are used to control the internal timing of an animation (players control how an animation progresses relative to document time). TimingDictionaries have several properties that can be tweaked:

duration: the duration of a single iteration of the animation
iterations: the number of iterations of the animation that will be played (fractional iterations are allowed)
iterationStart: the start offset of the first iteration
fill: whether the animation has effect before starting the first iteration and/or after finishing the final iteration
delay: the time between the animation's start time and the first animation effect of the animation
playbackRate: the rate at which the animation progresses relative to external time
direction: the direction in which successive iterations of the animation play back
easing: fine-grained control over how external time impacts an animation across the total active duration of the animation.

PLEASE CONSIDER LEVERAGING AS MUCH AS YOU CAN FROM CSS ALREADY DEFINED PROPERTY, AND METHOD LIKE PROPERTIES

CSS Animation Properties
Property	Description	CSS
@keyframes	Specifies the animation	3
animation	A shorthand property for all the animation properties below, except the animation-play-state property	3
animation-delay	Specifies when the animation will start	3
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles	3
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle	3
animation-fill-mode	Specifies what values are applied by the animation outside the time it is executing	3
animation-iteration-count	Specifies the number of times an animation should be played	3
animation-name	Specifies a name for the @keyframes animation	3
animation-timing-function	Specifies the speed curve of the animation	3
animation-play-state	Specifies whether the animation is running or paused	3
Transform Properties
Property	Description	CSS
backface-visibility	Defines whether or not an element should be visible when not facing the screen	3
perspective	Specifies the perspective on how 3D elements are viewed	3
perspective-origin	Specifies the bottom position of 3D elements	3
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position on transformed elements	3
transform-style	Specifies how nested elements are rendered in 3D space	3
Transitions Properties
Property	Description	CSS
transition	A shorthand property for setting the four transition properties	3
transition-property	Specifies the name of the CSS property the transition effect is for	3
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete	3
transition-timing-function	Specifies the speed curve of the transition effect	3
transition-delay	Specifies when the transition effect will start	3


COMBINING TO  CHANGE TO THIS:


Controlling the animation timing

TimingDictionaries are used to control the internal timing of an animation (players control how an animation progresses relative to document time). TimingDictionaries have several properties that can be tweaked:

duration: the duration of a single iteration of the animation. 
Change to:
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle.
CSS Syntax
animation-duration: time|initial|inherit;
Property Values
Value	Description	
time	Specifies the length an animation takes to finish. Default value is 0, meaning there will be no animation	
initial	Sets this property to its default value. 	
inherit	Inherits this property from its parent element. 

iterations: the number of iterations of the animation that will be played (fractional iterations are allowed). 
Change to:
animation-iteration-count Specifies how many seconds or milliseconds an animation takes to complete one cycle.
CSS Syntax
animation-iteration-count:number|infinite|initial|inherit;
Property Values
Value	Description	
number	A number that defines how many times an animation should be played. Default value is 1	
infinite	Specifies that the animation should be played infinite times (for ever)	
initial	Sets this property to its default value.	
inherit	Inherits this property from its parent element.

CSS Syntax
animation-iteration-count:number|infinite|initial|inherit;
Property Values
Value	Description	
number	A number that defines how many times an animation should be played. Default value is 1	
infinite	Specifies that the animation should be played infinite times (for ever)	
initial	Sets this property to its default value. 	
inherit	Inherits this property from its parent element.

fill: whether the animation has effect before starting the first iteration and/or after finishing the final iteration. 
Change to:
animation-fill-mode Specifies what values are applied by the animation outside the time it is executing.

direction: the direction in which successive iterations of the animation play back. 
Change to:
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles.
CSS Syntax
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Property Values
Value	Description	
normal	Default value. The animation should be played as normal	
reverse	The animation should play in reverse direction	
alternate	The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)	
alternate-reverse	The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)	
initial	Sets this property to its default value.	
inherit	Inherits this property from its parent element.

delay: the time between the animation's start time and the first animation effect of the animation. 
Change to:
animation-delay Specifies when the animation will start.
CSS Syntax
animation-delay: time|initial|inherit;
Property Values
Value	Description	
time	Optional. Defines the number of seconds or milliseconds to wait before the animation will start. Default value is 0	
initial	Sets this property to its default value. 
inherit	Inherits this property from its parent element.

easing: fine-grained control over how external time impacts an animation across the total active duration of the animation. 
Change this to:
animation-timing-function Specifies the speed curve of the transition effect.
CSS Syntax
animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit;
The animation-timing-function uses a mathematical function, called the Cubic Bezier curve, to make the speed curve. You can use your own values in this function, or use one of the pre-defined values:

Property Values
Value	Description	
linear	The animation has the same speed from start to end	
ease	Default value. The animation has a slow start, then fast, before it ends slowly	
ease-in	The animation has a slow start	
ease-out	The animation has a slow end	
ease-in-out	The animation has both a slow start and a slow end	
cubic-bezier(n,n,n,n)	Define your own values in the cubic-bezier function
Possible values are numeric values from 0 to 1	
initial	Sets this property to its default value.	
inherit	Inherits this property from its parent element.


Syntax:
var anim = new Animation(
ELEMENT_NODE, 
[{CSS PRESENTATION PROPERTIES}], 
{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES},
TIMING VALUE);/*I believe this will also make the timing value optional*/

Example:

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

CSS version:

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:

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:

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

-----

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

CSS version

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

MIX:

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

CSS version:

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

No comment on these two.... They look to be driven from HTML5 audio and/or video element node.
iterationStart: the start offset of the first iteration
playbackRate: the rate at which the animation progresses relative to external time
Thank you for taking the time to read.

I... I just want to say this is beautiful... Just consider letting what is proposal above be an option for the third parameter.

And I hope all of this:

5.3.2 Methods

cancel:
Clears all effects caused by this player and aborts it playback by running the cancel a player for this object.

finish:
Seeks the player to the end of the source content in the current direction by running the finish a player procedure for this object.

play:
Unpauses the player and rewinds if it has finished playing by running the procedure to play a player for this object.

pause:
Suspends the playback of this player by running the procedure to pause a player for this object.

reverse:
Inverts the playback rate of this player and seeks to the start of the source content if it has finished playing in the reversed direction by running the reverse a player procedure for this object.

enum AnimationPlayState { "idle", "pending", "running", "paused", "finished" };
5.3.3.1 Values

idle:
Corresponds to the idle play state.
pending:
Corresponds to the pending play state.
running:
Corresponds to the running play state.
paused:
Corresponds to the paused play state.
finished:
Corresponds to the finished play state.

I can avoid using in favor of the CSS properties:

JavaScript syntax:	object.style.animationPlayState="paused"

CSS Syntax
animation-play-state: paused|running|initial|inherit;
Property Values
Value	Description	
paused	Specifies that the animation is paused	
running	Default value. Specifies that the animation is running	
initial	Sets this property to its default value.

inherit
Inherits this property from its parent element.

And even consult to CSS working group of considering adding the properties you define: cancel, finish, play, pause, reverse, idle, pending, running, paused, finished.


JavaScript syntax:	object.style.animationPlayState="cancel|finish|play|pause|reverse|idle|pending|running|paused|finished"

Sorry for any mistype/typo. If anyone is truly interested in this, and request I clear, or give more information, please email.

Again, thank you for reading.

E-S4L
E-S4L