feat: add fading exits animations

README.md

@@ -395,6 +395,22 @@ const { ref } = useWebAnimations({
 - fadeInTopRight
 - fadeInBottomLeft
 - fadeInBottomRight
+
+#### Fading exits
+
+- fadeOut
+- fadeOutDown
+- fadeOutDownBig
+- fadeOutLeft
+- fadeOutLeftBig
+- fadeOutRight
+- fadeOutRightBig
+- fadeOutUp
+- fadeOutUpBig
+- fadeOutTopLeft
+- fadeOutTopRight
+- fadeOutBottomLeft
+- fadeOutBottomRight
 </details>
 
 ## Use Your Own `ref`

demo/Animations/index.tsx

@@ -100,6 +100,21 @@ const Animations: FC = () => {
           <option value="fadeInBottomLeft">fadeInBottomLeft</option>
           <option value="fadeInBottomRight">fadeInBottomRight</option>
         </optgroup>
+        <optgroup label="Fading exits">
+          <option value="fadeOut">fadeOut</option>
+          <option value="fadeOutDown">fadeOutDown</option>
+          <option value="fadeOutDownBig">fadeOutDownBig</option>
+          <option value="fadeOutLeft">fadeOutLeft</option>
+          <option value="fadeOutLeftBig">fadeOutLeftBig</option>
+          <option value="fadeOutRight">fadeOutRight</option>
+          <option value="fadeOutRightBig">fadeOutRightBig</option>
+          <option value="fadeOutUp">fadeOutUp</option>
+          <option value="fadeOutUpBig">fadeOutUpBig</option>
+          <option value="fadeOutTopLeft">fadeOutTopLeft</option>
+          <option value="fadeOutTopRight">fadeOutTopRight</option>
+          <option value="fadeOutBottomLeft">fadeOutBottomLeft</option>
+          <option value="fadeOutBottomRight">fadeOutBottomRight</option>
+        </optgroup>
       </select>
     </div>
   );

demo/Animations/styles.ts

@@ -16,6 +16,7 @@ export const target = css`
   font-size: 5rem;
   background: #333;
   cursor: pointer;
+  z-index: 1;
   &:focus {
     outline: none;
   }

src/animations/fadeOut.ts

@@ -0,0 +1,4 @@
+export default {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutBottomLeft.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(-100%, 100%, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutBottomRight.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(100%, 100%, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutDown.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(0, 100%, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutDownBig.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(0, 2000px, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutLeft.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(-100%, 0, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutLeftBig.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(-2000px, 0, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutRight.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(100%, 0, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutRightBig.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(2000px, 0, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutTopLeft.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(-100%, -100%, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutTopRight.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(100%, -100%, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutUp.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(0, -100%, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/fadeOutUpBig.ts

@@ -0,0 +1,7 @@
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1 },
+    { transform: "translate3d(0, -2000px, 0)", opacity: 0 },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};

src/animations/index.ts

@@ -41,3 +41,16 @@ export { default as fadeInTopLeft } from "./fadeInTopLeft";
 export { default as fadeInTopRight } from "./fadeInTopRight";
 export { default as fadeInBottomLeft } from "./fadeInBottomLeft";
 export { default as fadeInBottomRight } from "./fadeInBottomRight";
+export { default as fadeOut } from "./fadeOut";
+export { default as fadeOutDown } from "./fadeOutDown";
+export { default as fadeOutDownBig } from "./fadeOutDownBig";
+export { default as fadeOutLeft } from "./fadeOutLeft";
+export { default as fadeOutLeftBig } from "./fadeOutLeftBig";
+export { default as fadeOutRight } from "./fadeOutRight";
+export { default as fadeOutRightBig } from "./fadeOutRightBig";
+export { default as fadeOutUp } from "./fadeOutUp";
+export { default as fadeOutUpBig } from "./fadeOutUpBig";
+export { default as fadeOutTopLeft } from "./fadeOutTopLeft";
+export { default as fadeOutTopRight } from "./fadeOutTopRight";
+export { default as fadeOutBottomLeft } from "./fadeOutBottomLeft";
+export { default as fadeOutBottomRight } from "./fadeOutBottomRight";