aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/constants/animations.tsx
blob: 6a58c4b4095d173f8f2b9348c5e192ab3c7dd44e (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
`;