Motion-Path-Polyfill
diff --git a/‎examples/Nyancat.png‎
11.4 KB b/‎examples/Nyancat.png‎
11.4 KB
diff --git a/‎examples/basicShapeCirclePath.html‎
Lines changed: 31 additions & 0 deletions b/‎examples/basicShapeCirclePath.html‎
Lines changed: 31 additions & 0 deletions
@@ -0,0 +1,31 @@
+<!-- <!DOCTYPE html>
+<script src="../third_party/web-animations-js/web-animations.dev.js"></script>
+<script src="../motion-path-polyfill.min.js"></script>
+
+<div id="container">
+  <div id="target">
+    <img src="Nyancat.png" height="10%" width="10%">
+  </div>
+</div>
+
+<style>
+  body {
+    margin: 0px;
+  }
+
+  #container {
+    height: 100px;
+    width: 100px;
+  }
+  #target {
+    position: absolute;
+  }
+
+</style>
+
+<script>
+  var keyframes = [ {offsetPath: 'circle(100px at 500px 500px)', offsetDistance: '0%'},
+                    {offsetPath: 'circle(100px at 500px 500px)', offsetDistance: '100%'}];
+  var timing = {duration: 20000, iterations: 3};
+  target.animate(keyframes, timing);
+</script> -->