Consider Leverage more off CSS

I'm copy and pasted 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.

CONSIDER LEVERAGING AS MUCH AS POSSIBLE FROM CSS ALREADY DEFINED PROPERTIES, AND METHODS.

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


MAKING TIME-DICTIONARY OPTIONAL TO   TO CSS ANIMATION, TRANSFORM TRANSITIONS PROPERTIES:

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. 
MAKE IT OPTIONAL 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). 
MAKE IT OPTIONAL 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. 
MAKE IT OPTIONAL 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. 
MAKE IT OPTIONAL 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. 
MAKE IT OPTIONAL 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. 
MAKE IT OPTIONAL 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









ALSO MAKE THESE OPTIONAL:
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.

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.

VIA:

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.

With addition of these properties added on: 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.

Thank you for reading.

E-S4L