Single keyframes unsupported

In the spec, we’re given the following example: elem.animate({ left: '100px' }, 3000); As written, this throws the following error: TypeError: Keyframe effect must be null or an array of keyframes.

So, I make it a single-element array: elem.animate([{ left: '100px' }], 3000); And I try to explicitly declare the offset elem.animate([{offset: 0}, { left: '100px', offset: 1}], 3000); Both return NotSupportedError: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

Not sure if this is a bug or just a document that needs an update, but given these limitations, how can I animate starting from a current position? For example, if I don’t know what the element’s ‘left’ property is, but I know I want it to end up at 100px.

[dstoc]

All of these examples depend on additive animation, (in the 0/1 keyframes where left is not specified it’s treated as adding 0 to the underlying value. The error messages as you note are not that great, but as noted in the README.md additive animation is still to be implemented.

For example, if I don’t know what the element’s ‘left’ property is, but I know I want it to end up at 100px.

For now you will need to create a keyframe by reading the computed style:

elem.animate([{left: getComputedStyle(elem).left}, {left: '100px'}], 3000);

[shans]

Additive animation feature tracking here: https://github.com/web-animations/web-animations-next/issues/325