Re: Consider Leverage more off CSS

Yes it's different.... I'mma redo it latter.

What I'm proposing is that you can be able to define the duration--things of that nature-- via CSS too:

 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);

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' }, 
{a"nimation-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*/

--------EXPLAIN HERDERS---------

-JavaScript syntax CSS optional version

Means that it use the CSS JavaScript syntax form, when writing this in JavaScript source code.

For example:

elem.style.backgroundColor = "#0000ff";

-CSS syntax optional version

Is when you set it in either an external file, or internal --via style element-- file, or via JavaScript source code using the setAttribute method. For example:

Via external/internal
P{
  background-color : #0000ff;
}
Via JavaScript

P.setAttribute("background-color","#0000ff");

This will allow for more flexible, optional, and varieties of setting properties.

-MIX

Is a mixture of JavaScript/CSS syntax version.

-JavaScript/CSS syntax version:

Is syntax of a CSS property that don't conflict with the rules of name properties in JavaScript. I.e. They don't need to be inclose in double/single quotes.

If you would refer back to that long message, and go to the CSS properties, you can read/see the possibilities via the animations, transforms, and transitions properties.

E-S4L

> On Aug 6, 2014, at 12:47 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
> Is this a repeat of the email you had already sent?  If not, what's different?
> 
> Note that it would be very helpful if you didn't send such extremely long emails.  This was 14 screens tall on my laptop, but I doubt it's more than one or two screenfuls of actual content.  It's very difficult to figure out what you're actually trying to say when we have to pick it out from tons of irrelevant information.
> 
> ~TJ