adding web animations api version

jsnkuhn · May 16, 2017 · 5457417 · 5457417
1 parent 4d175e2
commit 5457417
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 This repository contains examples of CSS usage.
 
-The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the step() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find a version that shows the [same timing function used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html).
+The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find versions that show the same timing function [used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html), and used with the [Web Animations API](http://mdn.github.io/css-examples/animation-frames-timing-function/index-waa.html).
 
 The "counter-style-demo" directory contains a demo for the [@counter-style documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style). See the live demo [here](https://mdn.github.io/css-examples/counter-style-demo/).
 

diff --git a/animation-frames-timing-function/index-waa.html b/animation-frames-timing-function/index-waa.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Web animations API frames example</title>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      div {
+        position: relative;
+        width: 0%;
+        height: 200px;
+        background: red;
+      }
+
+      p {
+        position: absolute;
+        width: 250px;
+        top: 10px;
+        left: 10px;
+        color: white;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div class="div1"><p>transition-timing-function: frames(10)<p></div>
+    <div class="div2"><p>transition-timing-function: steps(10);<p></div>
+    <div class="div3"><p>transition-timing-function: ease-in;<p></div>
+
+    <script>
+
+      var easingFunctions = [
+        'frames(10)',
+        'steps(10)',
+        'ease-in'
+      ]
+
+      var keyFrames = [
+        { width: '0%', background : 'red'},
+        { width: '100%', background : 'blue'},
+      ]
+
+      var divs = document.querySelectorAll('div');
+
+      for(var i = 0; i < divs.length; i++) {
+        divs[i].animate(keyFrames, {
+          easing : easingFunctions[i],
+          duration : 5000,
+          iterations: Infinity
+        });
+      }
+
+    </script>
+  </body>
+</html>