More example please

[L2L2L]

MOAR!!!! Example pleases.... Please make a page of examples with comments of what you doing as you go....

I could try, but I doubt you will be willing to point out my mistakes....

[douglasduteil]

+1

[dstoc]

Working on it!

I could try, but I doubt you will be willing to point out my mistakes....

We would be happy to.

[L2L2L]

var anim = new Animation( element_node, [{ left: "25px" },{left: "50px"}], {animation: "5s linear 2s infinite"}, 3000);

var anim = elem.animate({ opacity: 0 }, 3000);

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

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

var animB = new Animation(elem, [ { left: '100px' }, { left: '300px' } ], {animation-duration: "3s"});

elem.animate({ color: 'red' }, 2000);

elem.animate( { color: 'red' }, {animation-duration: "2s"});

This is just a daft

[joeytwiddle]

There are a bunch of examples in the test/testcases folder although they are more about testing and less about practical uses.

[dstoc]

var anim = new Animation( element_node, [{ left: "25px" },{left: "50px"}], {animation: "5s linear 2s infinite"}, 3000);

You have three duration values here, but I'm guessing you're only trying to specify duration and delay. In the web-animations API you would write this as:

var anim = new Animation(
    element_node,
    [{left: "25px"}, {left: "50px"}],
    {duration: 5000, delay: 2000, iterations: Infinity});

var anim = elem.animate({ opacity: 0 }, 3000);

This should work in the Polyfill. Chrome's native implementation does not support single keyframes yet.

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*/

animation-duration isn't a valid identifier in JavaScript, so you would have to write something like:

{"animation-duration": "3s"}

For brevity, the Web Animations API uses simply duration.

// Specify multiple properties at once var animA = new Animation(elem, { left: '100px', top: '300px' }, 3000);

Correct.

var animA = new Animation(elem, { left: '100px', top: '300px' }, {animation-duration: "3s"});

duration not animation-duration, and 3000 not "3s"

// Specify multiple frames var animB = new Animation(elem, [ { left: '100px' }, { left: '300px' } ], 3000);

Correct.

var animB = new Animation(elem, [ { left: '100px' }, { left: '300px' } ], {animation-duration: "3s"});

duration not animation-duration, and 3000 not "3s"

elem.animate({ color: 'red' }, 2000);

Correct.

elem.animate( { color: 'red' }, {animation-duration: "2s"});

duration not animation-duration, and 2000 not `"2s"

[L2L2L]

@dstockwell

Truthful, this is a copy of my proposal to the animation working group, thank you for pointing out my errors.

[dstoc]

We did a refresh of the demos page and added a few new demos: http://web-animations.github.io/web-animations-demos/

[douglasduteil]

Awesome !