`.
21 | [Try it as a live demo.](http://jsbin.com/yageyezabo/edit?html,js,output)
22 |
23 | ```html
24 |
25 |
26 |
27 |
28 |
Hello world!
29 |
30 |
31 |
42 | ```
43 |
44 | Documentation
45 | -------------
46 |
47 | * [Codelab tutorial](https://github.com/web-animations/web-animations-codelabs)
48 | * [Examples of usage](/docs/examples.md)
49 | * [Live demos](https://web-animations.github.io/web-animations-demos)
50 | * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)
51 | * [W3C specification](https://drafts.csswg.org/web-animations/)
52 |
53 | We love feedback!
54 | -----------------
55 |
56 | * For feedback on the API and the specification:
57 | * File an issue on GitHub:
58 | * Alternatively, send an email to with subject line
59 | "[web-animations] ... message topic ..."
60 | ([archives](http://lists.w3.org/Archives/Public/public-fx/)).
61 |
62 | * For issues with the polyfill, report them on GitHub:
63 | .
64 |
65 | Keep up-to-date
66 | ---------------
67 |
68 | Breaking polyfill changes will be announced on this low-volume mailing list:
69 | [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!forum/web-animations-changes).
70 |
71 | More info
72 | ---------
73 |
74 | * [Technical details about the polyfill](/docs/support.md)
75 | * [Browser support](/docs/support.md#browser-support)
76 | * [Fallback to native](/docs/support.md#native-fallback)
77 | * [Feature list](/docs/support.md#features)
78 | * [Feature deprecation and removal processes](/docs/support.md#process-for-breaking-changes)
79 | * To test experimental API features, try one of the
80 | [experimental targets](/docs/experimental.md)
81 |
--------------------------------------------------------------------------------
/src/web-animations-bonus-object-form-keyframes.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc. All rights reserved.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | (function(shared) {
16 | // If the polyfill is being loaded in a context where Element.animate is
17 | // supported but object-form syntax is not, then creating an animation
18 | // using the new syntax will either have no effect or will throw an exception.
19 | // In either case, we want to proceed to load this part of the polyfill.
20 | //
21 | // The test animation uses an opacity other than the one the element already
22 | // has, and doesn't need to change during the animation for the test to work.
23 | // After the test, the element's opacity will be left how we found it:
24 | // - If the animation is not created, the test will leave the element's
25 | // opacity untouched at originalOpacity.
26 | // - If the animation is created, it will be cancelled, and leave the
27 | // element's opacity at originalOpacity.
28 | // - If the animation is somehow created and runs without being cancelled,
29 | // when it finishes after 1ms, it will cease to have any effect (because
30 | // fill is not specified), and opacity will again be left at originalOpacity.
31 | var element = document.documentElement;
32 | var animation = null;
33 | var animated = false;
34 | try {
35 | var originalOpacity = getComputedStyle(element).getPropertyValue('opacity');
36 | var testOpacity = originalOpacity == '0' ? '1' : '0';
37 | animation = element.animate({'opacity': [testOpacity, testOpacity]},
38 | {duration: 1});
39 | animation.currentTime = 0;
40 | animated = getComputedStyle(element).getPropertyValue('opacity') == testOpacity;
41 | } catch (error) {
42 | } finally {
43 | if (animation)
44 | animation.cancel();
45 | }
46 | if (animated) {
47 | return;
48 | }
49 |
50 | var originalElementAnimate = window.Element.prototype.animate;
51 | window.Element.prototype.animate = function(effectInput, options) {
52 | if (window.Symbol && Symbol.iterator && Array.prototype.from && effectInput[Symbol.iterator]) {
53 | // Handle custom iterables in most browsers by converting to an array
54 | effectInput = Array.from(effectInput);
55 | }
56 |
57 | if (!Array.isArray(effectInput) && effectInput !== null) {
58 | effectInput = shared.convertToArrayForm(effectInput);
59 | }
60 |
61 | return originalElementAnimate.call(this, effectInput, options);
62 | };
63 | })(webAnimationsShared);
64 |
--------------------------------------------------------------------------------
/src/web-animations-bonus-cancel-events.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc. All rights reserved.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | (function() {
16 |
17 | if (document.createElement('div').animate([]).oncancel !== undefined) {
18 | return;
19 | }
20 |
21 | if (WEB_ANIMATIONS_TESTING) {
22 | var now = function() { return webAnimations1.timeline.currentTime; };
23 | } else if (window.performance && performance.now) {
24 | var now = function() { return performance.now(); };
25 | } else {
26 | var now = function() { return Date.now(); };
27 | }
28 |
29 | var AnimationCancelEvent = function(target, currentTime, timelineTime) {
30 | this.target = target;
31 | this.currentTime = currentTime;
32 | this.timelineTime = timelineTime;
33 |
34 | this.type = 'cancel';
35 | this.bubbles = false;
36 | this.cancelable = false;
37 | this.currentTarget = target;
38 | this.defaultPrevented = false;
39 | this.eventPhase = Event.AT_TARGET;
40 | this.timeStamp = Date.now();
41 | };
42 |
43 | var originalElementAnimate = window.Element.prototype.animate;
44 | window.Element.prototype.animate = function(effectInput, options) {
45 | var animation = originalElementAnimate.call(this, effectInput, options);
46 |
47 | animation._cancelHandlers = [];
48 | animation.oncancel = null;
49 |
50 | var originalCancel = animation.cancel;
51 | animation.cancel = function() {
52 | originalCancel.call(this);
53 | var event = new AnimationCancelEvent(this, null, now());
54 | var handlers = this._cancelHandlers.concat(this.oncancel ? [this.oncancel] : []);
55 | setTimeout(function() {
56 | handlers.forEach(function(handler) {
57 | handler.call(event.target, event);
58 | });
59 | }, 0);
60 | };
61 |
62 | var originalAddEventListener = animation.addEventListener;
63 | animation.addEventListener = function(type, handler) {
64 | if (typeof handler == 'function' && type == 'cancel')
65 | this._cancelHandlers.push(handler);
66 | else
67 | originalAddEventListener.call(this, type, handler);
68 | };
69 |
70 | var originalRemoveEventListener = animation.removeEventListener;
71 | animation.removeEventListener = function(type, handler) {
72 | if (type == 'cancel') {
73 | var index = this._cancelHandlers.indexOf(handler);
74 | if (index >= 0)
75 | this._cancelHandlers.splice(index, 1);
76 | } else {
77 | originalRemoveEventListener.call(this, type, handler);
78 | }
79 | };
80 |
81 | return animation;
82 | };
83 | })();
84 |
--------------------------------------------------------------------------------
/test/blink/interpolation/background-position-interpolation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
21 |
22 |
23 |
69 |
70 |
--------------------------------------------------------------------------------
/src/number-handler.js:
--------------------------------------------------------------------------------
1 | // Copyright 2014 Google Inc. All rights reserved.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | (function(scope, testing) {
16 |
17 | function numberToString(x) {
18 | return x.toFixed(3).replace(/0+$/, '').replace(/\.$/, '');
19 | }
20 |
21 | function clamp(min, max, x) {
22 | return Math.min(max, Math.max(min, x));
23 | }
24 |
25 | function parseNumber(string) {
26 | if (/^\s*[-+]?(\d*\.)?\d+\s*$/.test(string))
27 | return Number(string);
28 | }
29 |
30 | function mergeNumbers(left, right) {
31 | return [left, right, numberToString];
32 | }
33 |
34 | // FIXME: This should probably go in it's own handler.
35 | function mergeFlex(left, right) {
36 | if (left == 0)
37 | return;
38 | return clampedMergeNumbers(0, Infinity)(left, right);
39 | }
40 |
41 | function mergePositiveIntegers(left, right) {
42 | return [left, right, function(x) {
43 | return Math.round(clamp(1, Infinity, x));
44 | }];
45 | }
46 |
47 | function clampedMergeNumbers(min, max) {
48 | return function(left, right) {
49 | return [left, right, function(x) {
50 | return numberToString(clamp(min, max, x));
51 | }];
52 | };
53 | }
54 |
55 | function parseNumberList(string) {
56 | var items = string.trim().split(/\s*[\s,]\s*/);
57 | if (items.length === 0) {
58 | return;
59 | }
60 | var result = [];
61 | for (var i = 0; i < items.length; i++) {
62 | var number = parseNumber(items[i]);
63 | if (number === undefined) {
64 | return;
65 | }
66 | result.push(number);
67 | }
68 | return result;
69 | }
70 |
71 | function mergeNumberLists(left, right) {
72 | if (left.length != right.length) {
73 | return;
74 | }
75 | return [left, right, function(numberList) {
76 | return numberList.map(numberToString).join(' ');
77 | }];
78 | }
79 |
80 | function round(left, right) {
81 | return [left, right, Math.round];
82 | }
83 |
84 | scope.clamp = clamp;
85 | scope.addPropertiesHandler(parseNumberList, mergeNumberLists, ['stroke-dasharray']);
86 | scope.addPropertiesHandler(parseNumber, clampedMergeNumbers(0, Infinity), ['border-image-width', 'line-height']);
87 | scope.addPropertiesHandler(parseNumber, clampedMergeNumbers(0, 1), ['opacity', 'shape-image-threshold']);
88 | scope.addPropertiesHandler(parseNumber, mergeFlex, ['flex-grow', 'flex-shrink']);
89 | scope.addPropertiesHandler(parseNumber, mergePositiveIntegers, ['orphans', 'widows']);
90 | scope.addPropertiesHandler(parseNumber, round, ['z-index']);
91 |
92 | scope.parseNumber = parseNumber;
93 | scope.parseNumberList = parseNumberList;
94 | scope.mergeNumbers = mergeNumbers;
95 | scope.numberToString = numberToString;
96 |
97 | })(webAnimations1, webAnimationsTesting);
98 |
--------------------------------------------------------------------------------
/docs/experimental.md:
--------------------------------------------------------------------------------
1 |
2 | Experimental build targets
3 | --------------------------
4 |
5 | Most people should use the basic polyfill in `web-animations.min.js`. This
6 | tracks the Web Animations features that are supported natively in browsers.
7 | However, we also provide two additional build targets that contain experimental
8 | features.
9 |
10 | ### web-animations-next.min.js
11 |
12 | Contains all of web-animations.min.js plus features that are still undergoing
13 | discussion or have yet to be implemented natively.
14 |
15 | ### web-animations-next-lite.min.js
16 |
17 | A cut down version of web-animations-next, it removes several lesser used
18 | property handlers and some of the larger and less used features such as matrix
19 | interpolation/decomposition.
20 |
21 | Build target comparison
22 | -----------------------
23 |
24 | | | web-animations | web-animations-next | web-animations-next-lite |
25 | |------------------------|:--------------:|:-------------------:|:------------------------:|
26 | |Size (gzipped) | 15KB | 19KB | 15KB |
27 | |Element.animate | ✔ | ✔ | ✔ |
28 | |Timing input (easings, duration, fillMode, etc.) for animation effects| ✔ | ✔ | ✔ |
29 | |Playback control | ✔ | ✔ | ✔ |
30 | |Support for animating lengths, transforms and opacity| ✔ | ✔ | ✔ |
31 | |Support for animating other CSS properties| ✔ | ✔ | 🚫 |
32 | |Matrix fallback for transform animations | ✔ | ✔ | 🚫 |
33 | |KeyframeEffect constructor | 🚫 | ✔ | ✔ |
34 | |Simple GroupEffects & SequenceEffects | 🚫 | ✔ | ✔ |
35 | |Custom Effects | 🚫 | ✔ | ✔ |
36 | |Timing input (easings, duration, fillMode, etc.) for groups