aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/constants/animations.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/constants/animations.tsx')
-rw-r--r--packages/website/ts/@next/constants/animations.tsx18
1 files changed, 18 insertions, 0 deletions
diff --git a/packages/website/ts/@next/constants/animations.tsx b/packages/website/ts/@next/constants/animations.tsx
new file mode 100644
index 000000000..6a58c4b40
--- /dev/null
+++ b/packages/website/ts/@next/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;
+`;