styled component keyframes 변수,props 사용하기

const moveVertically = (y) => keyframes`
    0% {
        transform : translateY(0px) 
    }
    100% {
        transform : translateY(${y}px)
    }
`;

const BallAnimation = styled.g`
    animation : ${props => moveVertically(props.y)} ${props => props.time}s linear
`;

키프레임 생성 시 인자를 받아서 호출하고,

컴포넌트에서는 애니메이션 호출 시 props값을 넘기면 된다.