added angle wipes

Author: Adam Argyle

app/index.html

@@ -116,12 +116,20 @@ <h3>Wipes</h3>
         <dd><a href="#">in:wipe:left</a></dd>
         <dd><a href="#">in:wipe:up</a></dd>
         <dd><a href="#">in:wipe:down</a></dd>
+        <dd><a href="#">in:wipe:top-right</a></dd>
+        <dd><a href="#">in:wipe:top-left</a></dd>
+        <dd><a href="#">in:wipe:bottom-right</a></dd>
+        <dd><a href="#">in:wipe:bottom-left</a></dd>
 
         <dt>Exits</dt>
         <dd><a href="#">out:wipe:right</a></dd>
         <dd><a href="#">out:wipe:left</a></dd>
         <dd><a href="#">out:wipe:up</a></dd>
         <dd><a href="#">out:wipe:down</a></dd>
+        <dd><a href="#">out:wipe:top-right</a></dd>
+        <dd><a href="#">out:wipe:top-left</a></dd>
+        <dd><a href="#">out:wipe:bottom-right</a></dd>
+        <dd><a href="#">out:wipe:bottom-left</a></dd>
       </dl>
 
       <h3>Polygons</h3>

src/wipes/_includes.css

@@ -6,4 +6,14 @@
 @import "in-top.css";
 @import "in-right.css";
 @import "in-bottom.css";
-@import "in-left.css";
+@import "in-left.css";
+
+@import "in-top-right.css";
+@import "in-top-left.css";
+@import "in-bottom-right.css";
+@import "in-bottom-left.css";
+
+@import "out-top-right.css";
+@import "out-top-left.css";
+@import "out-bottom-right.css";
+@import "out-bottom-left.css";

src/wipes/_vars.css

@@ -4,4 +4,14 @@
   --wipe-left:   inset(0 100% 0 0);
   --wipe-top:    inset(0 0 100% 0);
   --wipe-right:  inset(0 0 0 100%);
+
+  --wipe-top-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+  --wipe-top-right-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+  --wipe-bottom-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+  --wipe-bottom-right-in: polygon(-50% 0%, 200% 0, 0 200%, 0 -50%);
+
+  --wipe-top-left-out: polygon(0 0, 0 0, 0 0, 0 50%);
+  --wipe-top-right-out: polygon(50% -50%, 150% 50%, 150% 50%, 50% -50%);
+  --wipe-bottom-left-out: polygon(-50% 50%, 50% 150%, 50% 150%, -50% 50%);
+  --wipe-bottom-right-out: polygon(150% 50%, 150% 50%, 50% 150%, 50% 150%);
 }

src/wipes/in-bottom-left.css

@@ -0,0 +1,12 @@
+@keyframes wipe-in-bottom-left {
+  from {
+    clip-path: var(--wipe-top-right-out);
+  }
+  to {
+    clip-path: var(--wipe-bottom-left-in);
+  }
+}
+
+[transition="in:wipe:bottom-left"] {
+  animation-name: wipe-in-bottom-left;
+}

src/wipes/in-bottom-right.css

@@ -0,0 +1,12 @@
+@keyframes wipe-in-bottom-right {
+  from {
+    clip-path: var(--wipe-top-left-out);
+  }
+  to {
+    clip-path: var(--wipe-bottom-right-in);
+  }
+}
+
+[transition="in:wipe:bottom-right"] {
+  animation-name: wipe-in-bottom-right;
+}

src/wipes/in-top-left.css

@@ -0,0 +1,12 @@
+@keyframes wipe-in-top-left {
+  from {
+    clip-path: var(--wipe-bottom-right-out);
+  }
+  to {
+    clip-path: var(--wipe-top-left-in);
+  }
+}
+
+[transition="in:wipe:top-left"] {
+  animation-name: wipe-in-top-left;
+}

src/wipes/in-top-right.css

@@ -0,0 +1,12 @@
+@keyframes wipe-in-top-right {
+  from {
+    clip-path: var(--wipe-bottom-left-out);
+  }
+  to {
+    clip-path: var(--wipe-top-right-in);
+  }
+}
+
+[transition="in:wipe:top-right"] {
+  animation-name: wipe-in-top-right;
+}

src/wipes/out-bottom-left.css

@@ -0,0 +1,12 @@
+@keyframes wipe-out-bottom-left {
+  from {
+    clip-path: var(--wipe-top-right-in);
+  }
+  to {
+    clip-path: var(--wipe-bottom-left-out);
+  }
+}
+
+[transition="out:wipe:bottom-left"] {
+  animation-name: wipe-out-bottom-left;
+}

src/wipes/out-bottom-right.css

@@ -0,0 +1,12 @@
+@keyframes wipe-out-bottom-right {
+  from {
+    clip-path: var(--wipe-top-left-in);
+  }
+  to {
+    clip-path: var(--wipe-bottom-right-out);
+  }
+}
+
+[transition="out:wipe:bottom-right"] {
+  animation-name: wipe-out-bottom-right;
+}

src/wipes/out-top-left.css

@@ -0,0 +1,12 @@
+@keyframes wipe-out-top-left {
+  from {
+    clip-path: var(--wipe-bottom-right-in);
+  }
+  to {
+    clip-path: var(--wipe-top-left-out);
+  }
+}
+
+[transition="out:wipe:top-left"] {
+  animation-name: wipe-out-top-left;
+}