Merge branch 'development' into feature/instant/tell-amount-available

1 files changed, 18 insertions, 0 deletions

diff --git a/packages/website/ts/constants/animations.tsx b/packages/website/ts/constants/animations.tsx
new file mode 100644
index 000000000..6a58c4b40
--- /dev/null
+++ b/packages/website/ts/constants/animations.tsx
@@ -0,0 +1,18 @@
+import { css, keyframes } from 'styled-components';
+
+export const fadeIn = keyframes`
+    0% {
+        transform: translateY(10px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+`;
+
+export const addFadeInAnimation = (duration: string = '0.5s', delay: string = '0s') => css`
+    opacity: 0;
+    transform: translateY(10px);
+    animation: ${fadeIn} ${duration} ${delay} forwards;
+`;