diff options
Diffstat (limited to 'packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx')
-rw-r--r-- | packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx new file mode 100644 index 000000000..ba141c01e --- /dev/null +++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx @@ -0,0 +1,31 @@ +import { css, keyframes, styled } from 'ts/style/theme'; + +const appearFromBottomFrames = keyframes` + from { + position: fixed; + bottom: -500px; + left: 0px; + right: 0px; + } + + to { + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + } +`; + +const stylesForAnimation = css` + position: fixed; +`; +const animations = css` + animation: ${appearFromBottomFrames} 1s ease 0s 1 forwards; +`; + +export const EaseUpFromBottomAnimation = styled.div` + ${props => animations}; + ${props => stylesForAnimation}; +`; + +EaseUpFromBottomAnimation.displayName = 'EaseUpFromBottomAnimation'; |