Re: Adding on to the animation objects

With setAttribute(); you define the style attribute via CSS syntax:

Node.setAttribute('style', 'animation-duration: 3s; animation-timing-function:linear; animation-delay: 2s; animation-play-state : infinite;'); 
 This will help with use case: 
 var anim = new Animation( element_node, [{ left: "25px"},{left: "50px"}], {animation: "linear"}, //short hand 3000);
 var anim = new Animation( element_node, [{ left: '25px' },{left: "50px"}], [{"animation-duration": "3s"}, {"animation-timing-function":"linear"}, {"animation-delay":"2s"}, {"animation-play-state":"infinite"}]); 
 var anim = new Animation( element_node, [{ left: '25px' },{left: "50px"}], [{animationDuration: "3s"}, {animationTimingFunction":"linear"}, {animationDelay":"2s"}, {animationPlayState:"infinite"}]);
 var anim = new Animation( element_node, [{ left: '25px' },{left: "50px"}], {animation: "3s linear 2s infinite"});
With all the CSS properties and those to come plus the syntax familiarities.

This will help developers.

E-S4L
N-S4L

> On Aug 16, 2014, at 12:44 PM, "L2L 2L" <emanuelallen@hotmail.com> wrote:
> 
> I'm bring my argument of allowing CSS name properties to be an option of fully defining the animation state again. I'm not clear on how my proposal was taken. A part of me worry from that individual respond that he did not fully receive what I was conveying, base on the fact he only mention the CSS property animation name.
> 
> I feel strongly for all of CSS properties to be able to defined the animation state: CSS ANIMATION, CSS TRANSITION, and CSS TRANSFORM properties.
> 
> --------------My Proposal--------------
> 
> What I'm proposing is that you can be able to define the duration--things of that nature-- via CSS too:
> 
> Notice:
> {CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}
> 
> I have label each example with a SYNTAX header below. This is my proposal, That it'll be optional to defined all animation via CSS properties and method-like functionalities.
> 
> Using CSS animation, CSS transition, CSS transform properties for more control, and varieties on how the animation will look, move, and act. 
> 
> Also I believe this will make the TIMING VALUE optional to define with CSS properties instead of at the end of the function.
> 
> Also in syntax chooses via either CSS inclose in double/single quotes, or via JavaScript camel case style.
> 
> SYNTAX:
> var anim = new Animation(
> ELEMENT_NODE, 
> 
> [{CSS PRESENTATION PROPERTIES}], 
> 
> [{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],
> 
> TIMING VALUE);
> 
> ----------------Example----------------
> EXAMPLE:
> 
> var anim = elem.animate({ opacity: 0 }, 3000);
> 
> JavaScript syntax CSS optional version:
> 
> var anim = elem.animate(
> { opacity: 0 }, 
> {animationDuration:"3s"});/* it could be just a short hand, but I would still express the un-short version both for readability and respect to CSS*/ 
> 
> CSS syntax optional version:
> 
> var anim = elem.animate(
> { opacity: 0 }, 
> {"animation-duration":"3s"});
> 
> -----------------
> 
> // Specify multiple properties at once
> var animA = new Animation(elem, { left: '100px', top: '300px' }, 3000);
> 
> JavaScript syntax CSS optional version:
> 
> var animA = new Animation(elem, 
> { left: '100px', top: '300px' }, 
> {animationDuration: "3s"});
> 
> CSS syntax optional 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);
> 
> JavaScript syntax CSS optional version:
> 
> var animB = new Animation(elem, 
> [ { left: '100px' }, { left: '300px' } ], 
> {animationDuration: "3s"});
> 
> CSS syntax optional version:
> 
> var animB = new Animation(elem, 
> [ { left: '100px' }, { left: '300px' } ], 
> {"animation-duration": "3s"});
> 
> -----
> 
> elem.animate({ color: 'red' }, 2000);
> 
> JavaScript syntax CSS optional version:
> 
> elem.animate(
> { color: 'red' }, 
> {animationDuration: "2s"});
> 
> CSS syntax optional version:
> 
> elem.animate(
> { color: 'red' }, 
> {"animation-duration": "2s"});
> 
> MIX:
> 
> var anim = new Animation(
> element_node, 
> [{ left: "25px"},{left: "50px"}], 
> {animation: "linear"}, //short hand
> 3000);
> 
> JavaScript/CSS syntax version:
> 
> var anim = new Animation(
> element_node, 
> [{ left: '25px' },{left: "50px"}], 
> {animation: "5s linear 2s infinite"}); /*all define in the short hand property; animation*/
> 
> 
> ---------End of example-------------
> 
> 
> This will allow for more flexible, optional, and varieties of setting properties.
> 
> E-S4L
> N-S4L