From 9f1940ec5811bd11180a62e8ebed89d7a7a0001e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=CC=81=20J=2E=20Kelling?= <kontakt@andrekelling.de>
Date: Thu, 14 Feb 2019 10:56:49 +0100
Subject: [PATCH] Fix slide CSS animation for safari browser

---
 css/wallop--slide.css | 120 ++++++------------------------------------
 package.json          |   2 +-
 2 files changed, 17 insertions(+), 105 deletions(-)

diff --git a/css/wallop--slide.css b/css/wallop--slide.css
index 6cc27f0..3e24c2b 100644
--- a/css/wallop--slide.css
+++ b/css/wallop--slide.css
@@ -43,184 +43,96 @@
 
 @-webkit-keyframes slideFromLeft {
   0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @-moz-keyframes slideFromLeft {
   0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @-ms-keyframes slideFromLeft {
   0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @keyframes slideFromLeft {
   0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @-webkit-keyframes slideFromRight {
   0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
 
 @-moz-keyframes slideFromRight {
   0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
 
 @-ms-keyframes slideFromRight {
   0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
 
 @keyframes slideFromRight {
   0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
 
 @-webkit-keyframes slideToLeft {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @-moz-keyframes slideToLeft {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @-ms-keyframes slideToLeft {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @keyframes slideToLeft {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    -moz-transform: translate3d(-100%, 0, 0);
-    -ms-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
+    left: -100%;
   }
 }
 
 @-webkit-keyframes slideToRight {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
 
 @-moz-keyframes slideToRight {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
 
 @-ms-keyframes slideToRight {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
 
 @keyframes slideToRight {
-  99% {
-    opacity: 1;
-  }
-
   100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    -moz-transform: translate3d(100%, 0, 0);
-    -ms-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
+    left: 100%;
   }
 }
diff --git a/package.json b/package.json
index 7ea80a9..24f980f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wallop",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "wallop is a minimal 4kb library for showing & hiding things",
   "main": "js/Wallop.js",
   "scripts": {