refactor: extract animate

src/components/InfoModal.js

@@ -3,6 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import GitHubButton from 'react-github-btn';
 import Logo from '../assets/img/logo.png';
+import BounceInDown from './animates/BounceInDown';
 
 const Wrapper = styled.section`
   position: fixed;
@@ -11,7 +12,9 @@ const Wrapper = styled.section`
   right: 0;
   bottom: 0;
   z-index: 999;
-
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .mask {
     position: absolute;
     top: 0;
@@ -21,19 +24,18 @@ const Wrapper = styled.section`
     background: rgba(0, 0, 0, 0.4);
   }
   .info {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
+    z-index: 9;
     padding: 1.4rem 1rem;
-    width: 20rem;
+    width: 22rem;
     box-shadow: 0 0 9px black;
     border-radius: 8px;
     text-shadow: 0 0 8px black;
     background-color: ${({ bgColor }) => {
       return bgColor;
     }};
     text-align: center;
+    transition: all 0.5s;
+    animation: ${BounceInDown} 1s;
 
     > h1 {
       margin-bottom: 1rem;

src/components/Preview.js

@@ -1,47 +1,10 @@
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 import URLSearchParams from '@ungap/url-search-params';
 import Download from './DownloadBtn';
 import IconClose from './IconClose';
 import BodyBg from '../assets/img/bg.texture.png';
-
-const BounceInDown = keyframes`
-from,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.96) translate3d(0, -3000px, 0);
-    transform: scale(0.96)  translate3d(0, -3000px, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(0.96) translate3d(0, 25px, 0);
-    transform: scale(0.96)  translate3d(0, 25px, 0);
-  }
-
-  75% {
-    -webkit-transform: scale(0.96) translate3d(0, -10px, 0);
-    transform: scale(0.96)  translate3d(0, -10px, 0);
-  }
-
-  90% {
-    -webkit-transform: scale(0.96) translate3d(0, 5px, 0);
-    transform: scale(0.96)  translate3d(0, 5px, 0);
-  }
-
-  to {
-    -webkit-transform: scale(0.96)  translate3d(0, 0, 0);
-    transform: scale(0.96) translate3d(0, 0, 0);
-  }
-`;
+import BounceInDown from './animates/BounceInDown';
 const ua = navigator.userAgent;
 const isiOSwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(ua);
 const isWebview = ua.toLowerCase().indexOf('micromessenger') > -1 || isiOSwebview;
@@ -57,7 +20,7 @@ const Wrapper = styled.section`
   background-image: url(${BodyBg});
   width: 100%;
   height: 100%;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); */
   animation: ${BounceInDown} 1s;
   animation-fill-mode: both;
   &.starting {

src/components/animates/BounceInDown.js

@@ -0,0 +1,34 @@
+import { keyframes } from 'styled-components';
+
+const BounceInDown = keyframes`
+from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+export default BounceInDown;