diff --git a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap
index 63812540..546ab1a5 100644
--- a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap
+++ b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap
@@ -67,7 +67,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#939393",
         "borderBottomLeftRadius": "10px",
@@ -112,7 +112,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "background-color 0.1s",
+        "transition": "0.1s",
         "width": "90%",
       }
     } />
@@ -129,7 +129,8 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransform": "translateX(0%)",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
         "alignSelf": "flex-start",
         "backgroundColor": "#FAFAFA",
@@ -166,6 +167,7 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "msFlexItemAlign": "start",
         "msFlexNegative": 0,
         "msPreferredSize": "auto",
+        "msTransform": "translateX(0%)",
         "paddingBottom": "0px",
         "paddingLeft": "0px",
         "paddingRight": "0px",
@@ -173,7 +175,8 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered
         "position": "relative",
         "textAlign": "inherit",
         "textDecoration": "none",
-        "transition": "background-color 0.1s",
+        "transform": "translateX(0%)",
+        "transition": "0.1s",
         "width": "20px",
       }
     } />
@@ -278,7 +281,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#D5D5D5",
         "borderBottomLeftRadius": "10px",
@@ -323,7 +326,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "background-color 0.1s",
+        "transition": "0.1s",
         "width": "90%",
       }
     } />
@@ -340,7 +343,8 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransform": "translateX(0%)",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
         "alignSelf": "flex-start",
         "backgroundColor": "#BDBDBD",
@@ -377,6 +381,7 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "msFlexItemAlign": "start",
         "msFlexNegative": 0,
         "msPreferredSize": "auto",
+        "msTransform": "translateX(0%)",
         "paddingBottom": "0px",
         "paddingLeft": "0px",
         "paddingRight": "0px",
@@ -384,7 +389,8 @@ exports[`components/Switch disabled when "true" a disabled checkbox is rendered
         "position": "relative",
         "textAlign": "inherit",
         "textDecoration": "none",
-        "transition": "background-color 0.1s",
+        "transform": "translateX(0%)",
+        "transition": "0.1s",
         "width": "20px",
       }
     } />
@@ -489,7 +495,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#939393",
         "borderBottomLeftRadius": "10px",
@@ -534,7 +540,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "background-color 0.1s",
+        "transition": "0.1s",
         "width": "90%",
       }
     } />
@@ -551,7 +557,8 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransform": "translateX(0%)",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
         "alignSelf": "flex-start",
         "backgroundColor": "#FAFAFA",
@@ -588,6 +595,7 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "msFlexItemAlign": "start",
         "msFlexNegative": 0,
         "msPreferredSize": "auto",
+        "msTransform": "translateX(0%)",
         "paddingBottom": "0px",
         "paddingLeft": "0px",
         "paddingRight": "0px",
@@ -595,7 +603,8 @@ exports[`components/Switch value when "false" an unchecked checkbox is rendered
         "position": "relative",
         "textAlign": "inherit",
         "textDecoration": "none",
-        "transition": "background-color 0.1s",
+        "transform": "translateX(0%)",
+        "transition": "0.1s",
         "width": "20px",
       }
     } />
@@ -700,7 +709,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
         "backgroundColor": "#A3D3CF",
         "borderBottomLeftRadius": "10px",
@@ -745,7 +754,7 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "textAlign": "inherit",
         "textDecoration": "none",
         "top": "0px",
-        "transition": "background-color 0.1s",
+        "transition": "0.1s",
         "width": "90%",
       }
     } />
@@ -755,16 +764,17 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
       Object {
         "MozBoxSizing": "border-box",
         "WebkitAlignItems": "stretch",
-        "WebkitAlignSelf": "flex-end",
+        "WebkitAlignSelf": "flex-start",
         "WebkitBoxAlign": "stretch",
         "WebkitBoxDirection": "normal",
         "WebkitBoxOrient": "vertical",
         "WebkitFlexBasis": "auto",
         "WebkitFlexDirection": "column",
         "WebkitFlexShrink": 0,
-        "WebkitTransition": "background-color 0.1s",
+        "WebkitTransform": "translateX(100%)",
+        "WebkitTransition": "0.1s",
         "alignItems": "stretch",
-        "alignSelf": "flex-end",
+        "alignSelf": "flex-start",
         "backgroundColor": "#009688",
         "borderBottomLeftRadius": "100%",
         "borderBottomRightRadius": "100%",
@@ -796,9 +806,10 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "minWidth": "0px",
         "msFlexAlign": "stretch",
         "msFlexDirection": "column",
-        "msFlexItemAlign": "end",
+        "msFlexItemAlign": "start",
         "msFlexNegative": 0,
         "msPreferredSize": "auto",
+        "msTransform": "translateX(100%)",
         "paddingBottom": "0px",
         "paddingLeft": "0px",
         "paddingRight": "0px",
@@ -806,7 +817,8 @@ exports[`components/Switch value when "true" a checked checkbox is rendered 1`]
         "position": "relative",
         "textAlign": "inherit",
         "textDecoration": "none",
-        "transition": "background-color 0.1s",
+        "transform": "translateX(100%)",
+        "transition": "0.1s",
         "width": "20px",
       }
     } />
diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js
index 1a5593f7..45ad85ef 100644
--- a/src/components/Switch/index.js
+++ b/src/components/Switch/index.js
@@ -88,9 +88,9 @@ class Switch extends Component {
     const thumbStyle = [
       styles.thumb,
       {
-        alignSelf: value ? 'flex-end' : 'flex-start',
         backgroundColor: thumbCurrentColor,
         height: thumbHeight,
+        transform: [ { translateX: value ? '100%' : '0%' } ],
         width: thumbWidth
       },
       disabled && styles.disabledThumb
@@ -151,16 +151,17 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     height: '70%',
     margin: 'auto',
-    transition: 'background-color 0.1s',
+    transition: '0.1s',
     width: '90%'
   },
   disabledTrack: {
     backgroundColor: '#D5D5D5'
   },
   thumb: {
+    alignSelf: 'flex-start',
     borderRadius: '100%',
     boxShadow: thumbDefaultBoxShadow,
-    transition: 'background-color 0.1s'
+    transition: '0.1s'
   },
   disabledThumb: {
     backgroundColor: '#BDBDBD'
diff --git a/src/modules/multiplyStyleLengthValue/index.js b/src/modules/multiplyStyleLengthValue/index.js
index 0afdcb50..f44c068a 100644
--- a/src/modules/multiplyStyleLengthValue/index.js
+++ b/src/modules/multiplyStyleLengthValue/index.js
@@ -1,4 +1,4 @@
-const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(\w*)/;
+const CSS_UNIT_RE = /^[+-]?\d*(?:\.\d+)?(?:[Ee][+-]?\d+)?(%|\w*)/;
 
 const getUnit = (str) => str.match(CSS_UNIT_RE)[1];