본문 바로가기

FE/Vanilla

styled-components keyframes

import styled, { keyframes } from 'styled-components';

const indeterminateAnimation = keyframes`
  from {
    transform:  translateX(0) scaleX(0.5);
  }

  to {
    transform:  translateX(400%) scaleX(0.5);
  }
`;

const Progressor = styled.div`
  position: absolute;
  top: 0;
  height: 4px;
  width: 30%;
  background-color: yellow
  animation: ${indeterminateAnimation} 1s infinite linear;
  transform-origin: 0 50%;
`;

 

withconfig is undefined

keyframes is not a function 같은 에러가 뜬다면 

 

styled.keyframes``;(X) -> keyframes``;(O)

 

확인하고 from to 로 바꿔서 해보자