From 212976488dde0a5e4cc56a2cbe14a7ee0203dca5 Mon Sep 17 00:00:00 2001
From: Thomas FETIVEAU <thomas.fetiveau.tech@gmail.com>
Date: Sat, 13 Feb 2016 13:12:14 +0100
Subject: [PATCH 1/2] Add Hardware Acceleration example to README

---
 README.md | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/README.md b/README.md
index 151c2d4..85c3257 100644
--- a/README.md
+++ b/README.md
@@ -134,6 +134,49 @@ the duration of the transition. In this case:
 See the live example [here](http://marnusw.github.io/react-css-transition-replace#fade-wait).
 
 
+### Hardware acceleration for smoother transitions
+
+For even smoother transitions, try to use hardware acceleration whenever possible. Here is an example of what you could do for a mobile app transition between pages:
+
+```css
+.page-enter, .page-leave {
+  position: absolute;
+  -webkit-transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
+  transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
+}
+
+.page-enter {
+  opacity: 0;
+  left: 100vw;
+}
+
+.page-enter.page-enter-active {
+  opacity: 1;
+  -webkit-transform: translate3d(-100vw, 0, 0);
+  transform: translate3d(-100vw, 0, 0);
+}
+
+.page-leave {
+  opacity: 1;
+  left: 0;
+}
+
+.page-leave.page-leave-active {
+  opacity: 0;
+  -webkit-transform: translate3d(-100vw, 0, 0);
+  transform: translate3d(-100vw, 0, 0);
+}
+```
+
+```
+<ReactCSSTransitionReplace transitionName="page" transitionEnterTimeout={250} transitionLeaveTimeout={250} >
+  <div key="page01">
+    My page 01 content
+  </div>
+</ReactCSSTransitionReplace>
+```
+
+
 ## Tips
 
  1. In general animating `block` or `inline-block` level elements is more stable that `inline` elements. If the

From 161724762c3149052a7276060714ef61c066f41b Mon Sep 17 00:00:00 2001
From: Thomas FETIVEAU <thomas.fetiveau.tech@gmail.com>
Date: Mon, 7 Mar 2016 22:28:51 +0100
Subject: [PATCH 2/2] Explain what triggers hardware acceleration.

---
 README.md | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 85c3257..3b1bedb 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ See the live example [here](http://marnusw.github.io/react-css-transition-replac
 
 ### Hardware acceleration for smoother transitions
 
-For even smoother transitions, try to use hardware acceleration whenever possible. Here is an example of what you could do for a mobile app transition between pages:
+For even smoother transitions, try to trigger hardware acceleration whenever possible. Here is an example of what you could do for a mobile app transition between pages:
 
 ```css
 .page-enter, .page-leave {
@@ -146,23 +146,19 @@ For even smoother transitions, try to use hardware acceleration whenever possibl
 }
 
 .page-enter {
-  opacity: 0;
   left: 100vw;
 }
 
 .page-enter.page-enter-active {
-  opacity: 1;
   -webkit-transform: translate3d(-100vw, 0, 0);
   transform: translate3d(-100vw, 0, 0);
 }
 
 .page-leave {
-  opacity: 1;
   left: 0;
 }
 
 .page-leave.page-leave-active {
-  opacity: 0;
   -webkit-transform: translate3d(-100vw, 0, 0);
   transform: translate3d(-100vw, 0, 0);
 }
@@ -176,6 +172,7 @@ For even smoother transitions, try to use hardware acceleration whenever possibl
 </ReactCSSTransitionReplace>
 ```
 
+The use of translate3d instead of 2D translate will trigger hardware acceleration and make your transition even smoother.
 
 ## Tips