Index: bower_components/web-animations-js/README.md |
diff --git a/bower_components/web-animations-js/README.md b/bower_components/web-animations-js/README.md |
deleted file mode 100644 |
index 2c5e49b0c2e7128f176afbd1ffc8db55fa2e5016..0000000000000000000000000000000000000000 |
--- a/bower_components/web-animations-js/README.md |
+++ /dev/null |
@@ -1,237 +0,0 @@ |
-[](https://travis-ci.org/web-animations/web-animations-js) |
- |
-Latest specification at http://w3c.github.io/web-animations/. |
- |
-## Learn the tech |
- |
-### Why Web Animations? |
- |
-Four animation-related specifications already exist on the web platform: [CSS Transitions](http://dev.w3.org/csswg/css-transitions/), |
-[CSS Animations](http://dev.w3.org/csswg/css-animations/), [SVG Animations](http://www.w3.org/TR/SVG/animate.html) / [SMIL](http://www.w3.org/TR/2001/REC-smil-animation-20010904/), and `requestAnimationFrame()`. However: |
- |
-- *CSS Transitions / CSS Animations are not very expressive* - animations can't |
-be composed, or sequenced, or even reliably run in parallel; and animations can't be tweaked from script. |
-- *SVG Animations are very expressive, but also very complicated*. SVG Animations |
-can't be applied to HTML content. |
-- *`requestAnimationFrame()` is not a declarative approach* - it requires the use |
-of the main thread, and will therefore jank if the main thread is busy. |
- |
-Web Animations is a new specification for animated content on the web. It's being |
-developed as a W3C specification as part of the CSS and SVG working groups. It aims |
-to address the deficiencies inherent in these four specifications. Web Animations also aims to replace the underlying implementations of CSS Transitions, CSS Animations and SVG Animations, so that: |
- |
-- The code cost of supporting animations on the web is reduced. |
-- The various animations specifications are interoperable. |
-- Spec authors and browser vendors have a single place to experiment with new animation innovations to improve the Web for the future. |
- |
-### Basic usage |
- |
-Here's a simple example of an animation that scales and changes the opacity of |
-a `<div>` over 0.5 seconds. The animation alternates producing a pulsing effect. |
- |
- <div class="pulse" style="width:150px;">Hello world!</div> |
- <script> |
- var elem = document.querySelector('.pulse'); |
- var player = document.timeline.play(new Animation(elem, [ |
- {opacity: "0.5", transform: "scale(0.5)"}, |
- {opacity: "1.0", transform: "scale(1)"} |
- ], |
- { |
- direction: "alternate", duration: 500, iterations: Infinity |
- })); |
- </script> |
- |
-### The animation model |
- |
-The Web Animations model is a description of an engine for animation content on the web. The engine is sufficiently powerful to support CSS Transitions, CSS Animations and SVG Animations. |
- |
-Web Animations also exposes a JS API to the model. This API defines a number of |
-new interfaces that are exposed to JavaScript. We'll go through some of the more |
-important ones here: Animations, AnimationEffects, TimingDictionaries, TimingGroups, and AnimationPlayers. |
- |
-An `Animation` object defines a single animation effect that applies to a single element target. For example: |
- |
- var animation = new Animation(targetElement, |
- [{left: '0px'}, {left: '100px'}], 2000); |
- |
-Here, the target element's "left" CSS property is modified smoothly from `0px` to `100px` over 2 seconds. |
- |
-### Specifying animation effects |
- |
-An `AnimationEffect` object controls which CSS properties and SVG attributes are |
-modified by an animation, and the values that those properties and attributes |
-vary between. AnimationEffect objects also control whether the effect replaces |
-or adds to the underlying value. |
- |
-There are three major kinds of effects: `KeyframeEffect`, `MotionPathEffect`, and `EffectCallback`. |
- |
-#### Animating between keyframes |
- |
-A `KeyframeEffect` controls one or more properties/attributes by linearly |
-interpolating values between specified keyframes. KeyframeEffects are usually |
-defined by specifying the keyframe offset and the property-value pair in a |
-dictionary: |
- |
- [ |
- {offset: 0.2, left: "35px"}, |
- {offset: 0.6, left: "50px"}, |
- {offset: 0.9, left: "70px"}, |
- ] |
- |
-If the offset is not specified, keyframes are evenly distributed at offsets |
-between 0 and 1. |
- |
- [{left: "35px"}, {left: "50px"}, {left: "70px"}] |
- |
-See the [specification](http://www.w3.org/TR/web-animations/#keyframe-animation-effects) for the details |
-of the keyframe distribution procedure, and how KeyframeEffects are |
-evaluated at offsets outside those specified by the keyframes. |
- |
-#### Animating along paths |
- |
-A `MotionPathEffect` allows elements to be animated along SVG-style paths. For example: |
- |
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> |
- <defs> |
- <path id=path d="M 100,100 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/> |
- </defs> |
- </svg> |
- <script> |
- var animFunc = new MotionPathEffect(document.querySelector('#path').pathSegList); |
- var animation = new Animation(targetElement, animFunc, 2000); |
- </script> |
- |
-#### Custom animation effects |
- |
-An `EffectCallback` allows animations to generate call-outs to JavaScript |
-rather than manipulating properties directly. Please see the |
-[specification](http://www.w3.org/TR/web-animations/#custom-effects) for more details on this |
-feature. |
- |
-### Sequencing and synchronizing animations |
- |
-Two different types of TimingGroups (`AnimationGroup` and `AnimationSequence`) allow animations to be synchronized and sequenced. |
- |
-To play a list of animations in parallel: |
- |
- var animationGroup = new AnimationGroup([new Animation(...), new Animation(...)]); |
- |
-To play a list in sequence: |
- |
- var animationSequence = new AnimationSequence([new Animation(...), new Animation(...)]); |
- |
-Because `Animation`, `AnimationGroup`, `AnimationSequence` are all TimedItems, groups can be nested: |
- |
- var animationGroup = new AnimationGroup([ |
- new AnimationSequence([ |
- new Animation(...), |
- new Animation(...), |
- ]), |
- new Animation(...) |
- ]); |
- |
-Groups also take an optional TimingDictionary parameter (see below), which among other things allows iteration and timing functions to apply at the group level: |
- |
- var animationGroup = new AnimationGroup([new Animation(...), new Animation(...)], {iterations: 4}); |
- |
-### Controlling the animation timing |
- |
-TimingDictionaries are used to control the internal timing of an animation (players control how an animation progresses relative to document time). TimingDictionaries have several properties that can be tweaked: |
- |
-- **duration**: the duration of a single iteration of the animation |
-- **iterations**: the number of iterations of the animation that will be played (fractional iterations are allowed) |
-- **iterationStart**: the start offset of the first iteration |
-- **fill**: whether the animation has effect before starting the first iteration and/or after finishing the final iteration |
-- **delay**: the time between the animation's start time and the first animation effect of the animation |
-- **playbackRate**: the rate at which the animation progresses relative to external time |
-- **direction**: the direction in which successive iterations of the animation play back |
-- **easing**: fine-grained control over how external time impacts an animation across the total active duration of the animation. |
- |
-The values provided within TimingDictionaries combine with the animation hierarchy |
-to generate concrete start and end values for animation iterations, animation |
-backwards fills, and animation forwards fills. There are a few simple rules which govern this: |
- |
-- Animations never extend beyond the start or end values of their parent iteration. |
-- Animations only fill beyond their parent iteration if: |
- - the relevant fill value is selected for the animation; |
- - the matching fill value is selected for the parent; and |
- - this is the first parent iteration (for `fill: 'backwards'`) or last parent iteration (for `fill: 'forwards'`) |
-- Missing `duration` values for TimingGroups are generated based on the calculated durations of the child animations. |
- |
-The following example illustrates these rules: |
- |
- var animationGroup = new AnimationGroup([ |
- new AnimationSequence([ |
- new Animation(..., {duration: 3000}), |
- new Animation(..., {duration: 5000, fill: 'both'}) |
- ], {duration: 6000, delay: 3000, fill: 'none'}), |
- new Animation(..., {duration: 8000, fill: 'forwards'}) |
- ], {iterations: 2, fill: 'forwards'}); |
- |
-In this example: |
- |
-- The `AnimationSequence` has an explicit `duration` of 6 seconds, and so the |
-second child animation will only play for the first 3 of its 5 second duration |
-- The `AnimationGroup` has no explicit duration, and will be provided with a |
-calculated duration of the max (`duration + delay`) of its children - in this case 9 seconds. |
-- Although `fill: "both"` is specified for the second `Animation` within the `AnimationSequence`, the `AnimationSequence` itself has a `fill` of "none". Hence, as the animation ends right at the end of the `AnimationSequence`, the animation will only fill backwards, and only up until the boundary of the `AnimationSequence` (i.e. 3 seconds after the start of the `AnimationGroup`). |
-- The `Animation` inside the `AnimationGroup` and the `AnimationGroup` are both `fill: "forwards"`. Therefore the animation will fill forward in two places: |
- - from 8 seconds after the `AnimationGroup` starts until the second iteration of the `AnimationGroup` starts (i.e. for 1 second) |
- - from 17 seconds after the `AnimationGroup` starts, extending forward indefinitely. |
- |
-### Playing Animations |
- |
-In order to play an `Animation` or `TimingGroup`, an `AnimationPlayer` must be constructed: |
- |
- var player = document.timeline.play(myAnimation); |
- |
-AnimationPlayers provide complete control the start time and current playback head of their attached animation. However, players can't modify any internal details of an animation. |
- |
-AnimationPlayers can be used to pause, seek, reverse, or modify the playback rate of an animation. |
- |
-`document.timeline.currentTime` is a timeline's global time. It gives the number |
-of seconds since the document fired its load event. |
- |
-## Polyfill details |
- |
-### Getting started |
- |
-Include `web-animations.js` in your project: |
- |
- <script src="web-animations-js/web-animations.js"></script> |
- |
-### Polyfill notes |
- |
-#### Prefix handling |
- |
-In order to work in as many browsers as feasible, we have decided to take the |
-following approach to prefix handling: |
- |
-- the polyfill will automatically detect the correctly prefixed name to use when |
-writing animated properties back to the platform. |
-- where possible, the polyfill will *only* accept unprefixed versions of experimental features. For example: |
- |
- var animation = new Animation(elem, {"transform": "translate(100px, 100px)"}, 2000); |
- |
- will work in all browsers that implement a conforming version of `transform`, but |
- |
- var animation = new Animation(elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000); |
- |
- will not work anywhere. |
- |
-#### Experimental features |
- |
-When the polyfill requires features to implement functionality that is not inherently specified using those |
-features (for example, CSS `calc()` is required in order to implement merging between lengths with different units) |
-then the polyfill will provide a console warning in browsers where these features are absent. |
- |
-## Tools & testing |
- |
-For running tests or building minified files, consult the |
-[tooling information](http://www.polymer-project.org/resources/tooling-strategy.html). |
- |
-## Breaking changes |
- |
-When we make a potentially breaking change to the polyfill's API surface (like a rename) we'll continue supporting the old version, deprecated, for three months and ensure that there are console warnings that a change is pending. After three months, the old version of the API surface (e.g. the old version of a function name) will be removed. If you see deprecation warnings you can't avoid it by not updating. |
- |
-We also announce anything that isn't a bug fix on web-animations-changes@googlegroups.com (https://groups.google.com/forum/#!forum/web-animations-changes). |