Another attempt at conveying an add on to the animation object

Syntax:

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

Explanation:

var anim = new Animation(
//a element node
ELEMENT_NODE, 
//CSS static properties
[{CSS PRESENTATION PROPERTIES}], 
//CSS motion properties
[{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],
//timing value
TIMING VALUE);

Example:

This example utilize animation-timing-function ease-in and ease-out effect:
As it start with right:"25px", it start as an "ease-in" motion. And as it start with left:"25px", it end it with an "ease-out" motion all in 3 second:

CSS/ECMAScript syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
// short hand
[{animation: "none 0 ease-in 0 0 normal none running"}, 
// short hand
{animation: "none 0 ease-out 0 0 normal none running"}], 
3000);

/******
note that I could have omitted:
animation-name : none
animation-duration: 0
animation-delay: 0
animation-iteration-count: 0
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
Since these are default values. But I chosen to put them in, out of demonstration means.
******/

ECMAScript syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
[{animationTimingFunction: "ease-in"},
{animationTimingFunction: "ease-out"}],
3000);

CSS syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
[{"animation-timing-function": "ease-in"}, // short hand
{"animation-timing-function": "ease-out"}], //short hand 
3000);

Timing value set in CSS:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
// short hand
[{animation: "none 3s ease-in 0 0 normal none running"}, 
// short hand
{animation: "none 3s ease-out 0 0 normal none running"}]);

------I do hope you receive what I'm trying to convey with thee above syntax, explanation, and example-----

Also add to where we can set this via style attribute, as one can do so in SVG:

var anim = new Animation(
element_node, 
[{ style: "right: 25px"},
{style: "left: 25px"}], 
// short hand
[{style: "animation: none 0 ease-in 0 0 normal none running"}, 
// short hand
{style: "animation: none 0 ease-out 0 0 normal none running"}]);

Don't ask yourself why, just remember that developers will be using this tool, and letting them have such freedom to pick and choose what syntax they are more comfortable with is important. All these syntax I demonstrated above are from setting CSS in the style element node or a CSS external file, in ECMAScript with camel casing, and string inclose via the node's method property setAttribute, and via style attribute in an element's open tag.

These can be done already in ECMAScript. I'm concern with if it can be done with the animation objects.

For those of us who use variations of means of setting and manipulating the DOM. 
For those of us who experiment for hours to gain a better understanding with what we can do. 
For those of us who live, eat, sleep, and love ECMAScript to node server side scripting, is who I'm representing for.   

Thank you for reading.

N-S4L

Received on Friday, 8 August 2014 17:28:04 UTC