added ani

src/pages/App.js

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { BrowserRouter, Redirect, Route } from 'react-router-dom';
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import MediaQuery from 'react-responsive';
-import { AnimatedSwitch } from 'react-router-transition';
+//import { AnimatedSwitch } from 'react-router-transition';
 import { Web3Connect, startWatching, initialize } from '../ducks/web3connect';
 import { setAddresses } from '../ducks/addresses';
 import Header from '../components/Header';
@@ -45,19 +45,16 @@ class App extends Component {
         </MediaQuery>
         <Web3Connect />
         <BrowserRouter>
-          <AnimatedSwitch
-            atEnter={{ opacity: 0 }}
-            atLeave={{ opacity: 0 }}
-            atActive={{ opacity: 1 }}
-            className="app__switch-wrapper"
-          >
+          <Switch>
+            <div className="app__switch-wrapper">
               <Route exact path="/swap" component={Swap} />
               <Route exact path="/send" component={Send} />
               <Route exact path="/add-liquidity" component={Pool} />
               <Route exact path="/remove-liquidity" component={Pool} />
               <Route exact path="/create-exchange/:tokenAddress?" component={Pool} />
               <Redirect exact from="/" to="/swap" />
-          </AnimatedSwitch>
+            </div>
+          </Switch>
         </BrowserRouter>
       </div>
     );

src/pages/App.scss

@@ -30,3 +30,24 @@
     //max-width: 560px;
   }
 }
+
+
+@keyframes title_fade_in {
+  from {
+    opacity: 0;
+    top: -10px;
+  }
+  to {
+    opacity: 1;
+    top: 0px;
+  }
+}
+
+.ani_title_fade_in {
+  position: relative;
+  opacity: 0;
+  animation: title_fade_in cubic-bezier(0.23, 1, 0.32, 1) 1;
+  animation-fill-mode: forwards;
+  animation-duration: 1.2s;
+  animation-delay: 0s;
+}
\ No newline at end of file

src/pages/Pool/AddLiquidity.js

@@ -511,6 +511,8 @@ class AddLiquidity extends Component {
             'header--inactive': !isConnected,
           })}
         />
+
+        <div className='ani_title_fade_in'>
           {
             this.isNewExchange()
               ? (
@@ -572,6 +574,7 @@ class AddLiquidity extends Component {
             </button>
           </div>
         </div>
+      </div>
     ];
   }
 }

src/pages/Send/index.js

@@ -718,7 +718,7 @@ class Send extends Component {
     const { inputError, outputError, isValid } = this.validate();
 
     return (
-      <div className="send">
+      <div className="send ">
         <MediaQuery query="(max-width: 767px)">
           <Header />
         </MediaQuery>
@@ -732,6 +732,8 @@ class Send extends Component {
               'header--inactive': !this.props.isConnected,
             })}
           />
+
+          <div className='ani_title_fade_in'>
             <CurrencyInputPanel
               title="Input"
               description={lastEditedField === OUTPUT ? estimatedText : ''}
@@ -783,6 +785,8 @@ class Send extends Component {
               </button>
             </div>
           </div>
+
+        </div>
       </div>
     );
   }

src/pages/Swap/index.js

@@ -698,7 +698,6 @@ class Swap extends Component {
     const { inputError, outputError, isValid } = this.validate();
 
 
-
     return (
       <div className="swap">
         <MediaQuery query="(max-width: 767px)">
@@ -714,6 +713,8 @@ class Swap extends Component {
               'header--inactive': !this.props.isConnected,
             })}
           />
+
+          <div className='ani_title_fade_in'>
             <CurrencyInputPanel
               title="Input"
               description={lastEditedField === OUTPUT ? estimatedText : ''}
@@ -757,6 +758,7 @@ class Swap extends Component {
             </div>
           </div>
         </div>
+      </div>
     );
   }
 }