[css] 애니메이션 keyframes 모음

import { keyframes } from 'styled-components';

export const Bounce = keyframes`
from {transform: translateY(0px);}
to{transform: translateY(-15px);}
`;

export const LittleBounce = keyframes`
from {transform: translateY(0px);}
to{transform: translateY(-4px);}
`;

export const Opacity = keyframes`
  from {opacity: 0;}
  to {opacity: 1;}
`;

export const FromLeft = keyframes`
from {transform: translateX(-200%);}
to{transform: translateX(0%);}
`;

export const FromRight = keyframes`
from {transform: translateX(80%); opacity: 0}
to{transform: translateX(0%); opacity: 1}
`;

export const FromTop = keyframes`
from {transform: translateY(-200%);}
to{transform: translateY(0%);}
`;

export const FromBottom = keyframes`
from {transform: translateY(200%);}
to{transform: translateY(0%);}
`;

export const scaleUp = keyframes` 
  from { -webkit-transform: scale(0.95); }
  `;

export const Shake = keyframes`
  0% { transform: translate(2px, 2px) rotate(0deg); }
  1.78571% { transform: translate(-2px, -3px) rotate(-1deg); }
  3.57143% { transform: translate(-4px, 0px) rotate(1deg); }
  4.35714% { transform: translate(4px, 3px) rotate(0deg); }
  6.14286% { transform: translate(2px, -2px) rotate(1deg); }
  7.92857% { transform: translate(-1px, 2px) rotate(-1deg); }
  9.71429% { transform: translate(-3px, 1px) rotate(0deg); }
  10.8224% { transform: translate(-2px, -2px) rotate(1deg); }
  11.2354% { transform: translate(0px, 0px) rotate(-2deg); }
  100% { transform: translate(2px, 2px) rotate(0deg); }
`;


export const SlideItems = keyframes`
    0% { left: 100%; opacity: 1; }
   36% { left:  50%; opacity: 1; }
   72% { left: -50%; opacity: 1; }
  100% { left: -50%; }
`;

export const ConveyerVelt = keyframes`
0% {transform: translateX(-100%);}
50%{transform: translateX(0);}
`;


export const Gradient = keyframes`
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
`;

 

위와 같이 여러가지 애니메이션을 정의해두고,

styled-components에서 아래와 같이 사용했다.

 

const Blood = styled.div`
  animation: ${Blooddrop} 1.5s infinite;
`;

 

 

 

그냥 네비게이션바 여닫힐 때 슬라이드 효과를 간단하게 줄 수 있는 방법으로는, 아래와 같이 transition만 주면 된다.

      <Box
        as="nav"
        transition="ease-in-out .5s" 👈 HERE!!
        width={isOpen ? '280px' : '64px'}
        position={{ base: 'fixed', md: 'relative' }}
        left={{ base: isOpen ? '0' : '-280px', md: '0' }}
        top={0}
        bottom={0}
        display="flex"
        flexDirection="column"
        boxShadow="rgb(0 0 0 / 12%) 0px 1px 12px"
        borderTopRightRadius="20px"
        borderBottomRightRadius="20px"
        overflow="hidden"
        bg="primary.400"
        color="white"
        zIndex={3}
      >

 

단, hidden={!isOpen} 과 같은 코드가 들어갔을 때에 transition은 동작하지 않는다.