css scale3d used, readme updated

README.md

@@ -4,7 +4,7 @@
 
 [![NPM](https://img.shields.io/npm/v/react-insta-stories.svg)](https://www.npmjs.com/package/react-insta-stories) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-<img src="https://i.imgur.com/wJQZGSr.gif" width="300px" alt="Demo">
+![Demo screenshot](https://i.imgur.com/Twvjxp5.png)
 
 ## Install
 

src/components/Progress.js

@@ -63,10 +63,6 @@ const styles = {
     maxWidth: '100%',
     background: '#555',
     margin: 2
-  },
-  overlay: {
-    height: '100%',
-    background: 'white'
   }
 }
 

src/styles.css

@@ -1,9 +1,33 @@
 .inner {
   background: #fff;
   height: 100%;
+  max-width: 100%;
+  transform-origin: center left;
+
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+
+  -webkit-perspective: 1000;
+  -moz-perspective: 1000;
+  -ms-perspective: 1000;
+  perspective: 1000;
 }
 
 @keyframes slidein {
-  from { width: 0 }
-  to { width: 100%; }
+  from { 
+    -webkit-transform: scale3d(0, 1, 1);
+    -moz-transform: scale3d(0, 1, 1);
+    -ms-transform: scale3d(0, 1, 1);
+    -o-transform: scale3d(0, 1, 1);
+    transform: scale3d(0, 1, 1); 
+  }
+  to { 
+    -webkit-transform: scale3d(1, 1, 1);
+    -moz-transform: scale3d(1, 1, 1);
+    -ms-transform: scale3d(1, 1, 1);
+    -o-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1); 
+  }
 }