keyboard reveal + adaptive fix

src/components/keyboard.style.ts

@@ -1,6 +1,15 @@
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
 
+const reveal = keyframes`
+    from {
+        bottom: -600px;
+    }
+    to {
+        bottom: 0;
+    }
+`;
+
 export const Wrapper = styled.div`
     position: absolute;
     bottom: 0;
@@ -12,6 +21,8 @@ export const Wrapper = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    animation: ${reveal} .5s;
+    animation-timing-function: cubic-bezier(0, 0.65, 0.25, 1);
 `;
 
 export const KeyRow = styled.div`
@@ -20,7 +31,6 @@ export const KeyRow = styled.div`
 
 export const BackspaceBtn = styled.img`
     width: 60%;
-    /* height: 8px; */
 `;
 
 export const Key = styled.button`