Adding on to the animation objects

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

Received on Saturday, 16 August 2014 16:43:58 UTC