1 files changed, 117 insertions, 0 deletions
diff --git a/devtools/docs/user/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.rst b/devtools/docs/user/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.rst
new file mode 100644
index 0000000000..6d6f2cb045
--- /dev/null
+++ b/devtools/docs/user/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.rst
@@ -0,0 +1,117 @@
+===============================================
+Animation inspector example: Web Animations API
+===============================================
+
+Firefox Logo Animation
+**********************
+
+Example animation using the `Web Animations API <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>`_.
+
+
+HTML Content
+------------
+
+.. code-block:: html
+
+  <div class="channel">
+    <img src="developer.png" id="icon"/>
+    <span id="note">Firefox Developer Edition</span>
+  </div>
+
+
+CSS Content
+-----------
+
+.. code-block:: css
+
+  .channel {
+    padding: 2em;
+    margin: 0.5em;
+    box-shadow: 1px 1px 5px #808080;
+    margin: 1.5em;
+  }
+
+  .channel > * {
+    vertical-align: middle;
+    line-height: normal;
+  }
+
+  #icon {
+    width: 50px;
+    height: 50px;
+    filter: grayscale(100%);
+  }
+
+  #note {
+    margin-left: 1em;
+    font: 1.5em "Open Sans",Arial,sans-serif;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    opacity: 0;
+    width: 0;
+  }
+
+
+.. _page-inspector-work-with-animations-web-example-js-content:
+
+JavaScript Content
+------------------
+
+.. code-block:: JavaScript
+
+  var iconKeyframeSet = [
+    { transform: 'scale(1)', filter: 'grayscale(100%)'},
+    { filter:  'grayscale(100%)', offset: 0.333},
+    { transform: 'scale(1.5)', offset: 0.666 },
+    { transform: 'scale(1.5)', filter: 'grayscale(0%)'}
+  ];
+
+  var noteKeyframeSet = [
+    { opacity: '0', width: '0'},
+    { opacity: '1', width: '300px'}
+  ];
+
+  var iconKeyframeOptions = {
+    duration: 750,
+    fill: 'forwards',
+    easing: 'ease-in',
+    endDelay: 100
+  }
+
+  var noteKeyframeOptions = {
+    duration: 500,
+    fill: 'forwards',
+    easing: 'ease-out',
+    delay: 150
+  }
+
+  var icon = document.getElementById("icon");
+  var note = document.getElementById("note");
+
+  var iconAnimation = icon.animate(iconKeyframeSet, iconKeyframeOptions);
+  var noteAnimation = note.animate(noteKeyframeSet, noteKeyframeOptions);
+
+  iconAnimation.pause();
+  noteAnimation.pause();
+
+  var firstTime = true;
+
+  function animateChannel(e) {
+   if (e.button != 0) {
+   return;
+   }
+    if (e.target.id != "icon") {
+      return;
+    }
+    if (firstTime) {
+      iconAnimation.play();
+      noteAnimation.play();
+      firstTime = false;
+    } else {
+      iconAnimation.reverse();
+      noteAnimation.reverse();
+    }
+  }
+
+  document.addEventListener("click", animateChannel);