diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f46361..1314bcf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Release History
 
+## 4.1.0
+   - Make the animation smoother (at least in Chrome)
+
 ## 4.0.8
    - Old browser compatibility (contributed by @dengbupapapa)
 
diff --git a/build/loading_bar.js b/build/loading_bar.js
index c392259..0122c77 100644
--- a/build/loading_bar.js
+++ b/build/loading_bar.js
@@ -29,10 +29,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var UPDATE_TIME = exports.UPDATE_TIME = 200;
+var UPDATE_TIME = exports.UPDATE_TIME = 400;
 var MAX_PROGRESS = exports.MAX_PROGRESS = 99;
-var PROGRESS_INCREASE = exports.PROGRESS_INCREASE = 10;
-var ANIMATION_DURATION = exports.ANIMATION_DURATION = UPDATE_TIME * 4;
+var PROGRESS_INCREASE = exports.PROGRESS_INCREASE = 20;
+var ANIMATION_DURATION = exports.ANIMATION_DURATION = UPDATE_TIME * 2;
 var TERMINATING_ANIMATION_DURATION = exports.TERMINATING_ANIMATION_DURATION = UPDATE_TIME / 2;
 
 var initialState = {
@@ -134,31 +134,18 @@ var LoadingBar = function (_Component) {
     value: function buildStyle() {
       var animationDuration = this.state.status === 'stopping' ? TERMINATING_ANIMATION_DURATION : ANIMATION_DURATION;
 
-      //
-      // browser css3 animation compatibility
-      // Style keys are camelCased in order to be
-      // consistent with accessing the properties on DOM nodes from JS
-      // (e.g. node.style.backgroundImage).
-      // Vendor prefixes other than ms should begin with a capital letter.
-      // This is why WebkitTransition has an uppercase “W”.
-      // https://reactjs.org/docs/dom-elements.html#style
       var style = {
         opacity: '1',
-        transform: 'scaleX(' + this.state.percent / 100 + ')',
-        msTransform: 'scaleX(' + this.state.percent / 100 + ')',
-        WebkitTransform: 'scaleX(' + this.state.percent / 100 + ')',
-        MozTransform: 'scaleX(' + this.state.percent / 100 + ')',
-        OTransform: 'scaleX(' + this.state.percent / 100 + ')',
-        transformOrigin: 'left',
-        msTransformOrigin: 'left',
-        WebkitTransformOrigin: 'left',
-        MozTransformOrigin: 'left',
-        OTransformOrigin: 'left',
-        transition: 'transform ' + animationDuration + 'ms linear',
-        msTransition: '-ms-transform ' + animationDuration + 'ms linear',
-        WebkitTransition: '-webkit-transform ' + animationDuration + 'ms linear',
-        MozTransition: '-moz-transform ' + animationDuration + 'ms linear',
-        OTransition: '-o-transform ' + animationDuration + 'ms linear',
+        transform: 'translate3d(' + (this.state.percent - 100) + '%, 0px, 0px)',
+        msTransform: 'translate3d(' + (this.state.percent - 100) + '%, 0px, 0px)',
+        WebkitTransform: 'translate3d(' + (this.state.percent - 100) + '%, 0px, 0px)',
+        MozTransform: 'translate3d(' + (this.state.percent - 100) + '%, 0px, 0px)',
+        OTransform: 'translate3d(' + (this.state.percent - 100) + '%, 0px, 0px)',
+        transition: 'transform ' + animationDuration + 'ms linear 0s',
+        msTransition: '-ms-transform ' + animationDuration + 'ms linear 0s',
+        WebkitTransition: '-webkit-transform ' + animationDuration + 'ms linear 0s',
+        MozTransition: '-moz-transform ' + animationDuration + 'ms linear 0s',
+        OTransition: '-o-transform ' + animationDuration + 'ms linear 0s',
         width: '100%',
         willChange: 'transform, opacity'
         // Use default styling if there's no CSS class applied
diff --git a/package.json b/package.json
index 2c79f41..aeb64d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-redux-loading-bar",
-  "version": "4.0.8",
+  "version": "4.1.0",
   "description": "Simple Loading Bar for Redux and React",
   "main": "build/index.js",
   "typings": "index.d.ts",
diff --git a/src/loading_bar.js b/src/loading_bar.js
index 8d780e9..267f725 100644
--- a/src/loading_bar.js
+++ b/src/loading_bar.js
@@ -5,10 +5,10 @@ import { connect } from 'react-redux'
 
 import { DEFAULT_SCOPE } from './loading_bar_ducks'
 
-export const UPDATE_TIME = 200
+export const UPDATE_TIME = 400
 export const MAX_PROGRESS = 99
-export const PROGRESS_INCREASE = 10
-export const ANIMATION_DURATION = UPDATE_TIME * 4
+export const PROGRESS_INCREASE = 20
+export const ANIMATION_DURATION = UPDATE_TIME * 2
 export const TERMINATING_ANIMATION_DURATION = UPDATE_TIME / 2
 
 const initialState = {
@@ -152,31 +152,18 @@ class LoadingBar extends Component {
         ANIMATION_DURATION
     )
 
-    //
-    // browser css3 animation compatibility
-    // Style keys are camelCased in order to be
-    // consistent with accessing the properties on DOM nodes from JS
-    // (e.g. node.style.backgroundImage).
-    // Vendor prefixes other than ms should begin with a capital letter.
-    // This is why WebkitTransition has an uppercase “W”.
-    // https://reactjs.org/docs/dom-elements.html#style
     const style = {
       opacity: '1',
-      transform: `scaleX(${this.state.percent / 100})`,
-      msTransform: `scaleX(${this.state.percent / 100})`,
-      WebkitTransform: `scaleX(${this.state.percent / 100})`,
-      MozTransform: `scaleX(${this.state.percent / 100})`,
-      OTransform: `scaleX(${this.state.percent / 100})`,
-      transformOrigin: 'left',
-      msTransformOrigin: 'left',
-      WebkitTransformOrigin: 'left',
-      MozTransformOrigin: 'left',
-      OTransformOrigin: 'left',
-      transition: `transform ${animationDuration}ms linear`,
-      msTransition: `-ms-transform ${animationDuration}ms linear`,
-      WebkitTransition: `-webkit-transform ${animationDuration}ms linear`,
-      MozTransition: `-moz-transform ${animationDuration}ms linear`,
-      OTransition: `-o-transform ${animationDuration}ms linear`,
+      transform: `translate3d(${this.state.percent - 100}%, 0px, 0px)`,
+      msTransform: `translate3d(${this.state.percent - 100}%, 0px, 0px)`,
+      WebkitTransform: `translate3d(${this.state.percent - 100}%, 0px, 0px)`,
+      MozTransform: `translate3d(${this.state.percent - 100}%, 0px, 0px)`,
+      OTransform: `translate3d(${this.state.percent - 100}%, 0px, 0px)`,
+      transition: `transform ${animationDuration}ms linear 0s`,
+      msTransition: `-ms-transform ${animationDuration}ms linear 0s`,
+      WebkitTransition: `-webkit-transform ${animationDuration}ms linear 0s`,
+      MozTransition: `-moz-transform ${animationDuration}ms linear 0s`,
+      OTransition: `-o-transform ${animationDuration}ms linear 0s`,
       width: '100%',
       willChange: 'transform, opacity',
     }