Added sliding entrances and exits

Generic slideIn/Out animations for absolute elements

animate-config.json

@@ -100,6 +100,19 @@
     "zoomOutLeft": true,
     "zoomOutRight": true,
     "zoomOutUp": true
-  }
+  },
 
+  "sliding_entrances": {
+    "slideInDown": true,
+    "slideInLeft": true,
+    "slideInRight": true,
+    "slideInUp": true
+  },
+
+  "sliding_exits": {
+    "slideOutDown": true,
+    "slideOutLeft": true,
+    "slideOutRight": true,
+    "slideOutUp": true
+  }
 }

source/sliding_entrances/slideInDown.css

@@ -0,0 +1,14 @@
+@keyframes slideInDown {
+  0% {
+    transform: translateY(-100%);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.slideInDown {
+  animation-name: slideInDown;
+}

source/sliding_entrances/slideInLeft.css

@@ -0,0 +1,14 @@
+@keyframes slideInLeft {
+  0% {
+    transform: translateX(-100%);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slideInLeft {
+  animation-name: slideInLeft;
+}

source/sliding_entrances/slideInRight.css

@@ -0,0 +1,14 @@
+@keyframes slideInRight {
+  0% {
+    transform: translateX(100%);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slideInRight {
+  animation-name: slideInRight;
+}

source/sliding_entrances/slideInUp.css

@@ -0,0 +1,14 @@
+@keyframes slideInUp {
+  0% {
+    transform: translateY(100%);
+    visibility: visible;
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.slideInUp {
+  animation-name: slideInUp;
+}

source/sliding_exits/slideOutDown.css

@@ -0,0 +1,14 @@
+@keyframes slideOutDown {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translateY(100%);
+  }
+}
+
+.slideOutDown {
+  animation-name: slideOutDown;
+}

source/sliding_exits/slideOutLeft.css

@@ -0,0 +1,14 @@
+@keyframes slideOutLeft {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translateX(-100%);
+  }
+}
+
+.slideOutLeft {
+  animation-name: slideOutLeft;
+}

source/sliding_exits/slideOutRight.css

@@ -0,0 +1,14 @@
+@keyframes slideOutRight {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translateX(100%);
+  }
+}
+
+.slideOutRight {
+  animation-name: slideOutRight;
+}

source/sliding_exits/slideOutUp.css

@@ -0,0 +1,14 @@
+@keyframes slideOutUp {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translateY(-100%);
+  }
+}
+
+.slideOutUp {
+  animation-name: slideOutUp;
+}