adding web animations api examples

chrisdavidmills · chrisdavidmills · commit db946d73ef66 · 2020-04-02T20:08:30.000+01:00
diff --git a/web-animations-api/README.md b/web-animations-api/README.md
@@ -0,0 +1,16 @@
+#auxclick demo
+
+Some simple demos to show Web Animations API features.
+
+## Implicit to/from keyframes
+That is, when you write an animation, you can leave out the end state of the animation from the keyframes, and the browser will infer it, if it can. For example:
+
+```
+let rotate360 = [
+  { transform: 'rotate(360deg)' }
+];
+``` 
+
+[See the demo live](https://mdn.github.io/dom-examples/web-animations-api/implicit-keyframes.html). 
+
+
diff --git a/web-animations-api/implicit-keyframes.html b/web-animations-api/implicit-keyframes.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en-US">
+
+<head>
+  <meta charset="utf-8">
+  <title>Web Animations API implicit keyframes</title>
+  <style>
+    html {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+      height: inherit;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    div {
+      width: 150px;
+      height: 100px;
+      background-color: red;
+      border: 10px solid black;
+      border-radius: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <div>
+
+  </div>
+
+  <script>
+    const divElem = document.querySelector('div');
+
+    let rotate360 = [
+      { transform: 'rotate(360deg)' }
+    ];
+
+    let slowInfinite = {
+      duration: 5000,
+      iterations: Infinity
+    }
+
+    divElem.animate( rotate360, slowInfinite );
+
+  </script>
+</body>
+
+</html>
