[ERROR] It seems you are interpolating a keyframe declaration (cgYbGB) into an untagged string.

ERROR
It seems you are interpolating a keyframe declaration (cgYbGB) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css

에러코드에 해결법이 나와있다. css 헬퍼를 사용하라

에러 난 코드

const Mole = styled.img<{ isShow: number }>`
  height: 8rem;
  margin-right: 1rem;
  animation: ${({ isShow }) =>
    isShow >= 0.9 && `${slideInAndOut} '1.1s linear infinite`};
  :active {
    height: 6rem;
  }
`;

템플릿 리터럴 안에 또 템플릿 리터럴을 쓰는 게 뭔가 찝찝했는데 역시나

그렇다면 css helper란 뭔가?

A helper function to generate CSS from a template literal with interpolations. You need to use this if you return a template literal with functions inside an interpolation due to how tagged template literals work in JavaScript.
If you're interpolating a string you do not need to use this, only if you're interpolating a function.

interpolation 보간법이 등장하는데,
낯선 용어라 처음엔 오타인줄 알았다..
하지만 살펴보니, 빈번히 사용해오던 템플릿 리터럴 또한 string interpolation이라는 정의를 갖고있었다!
즉 interpolation이란 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 하며, 가변적인 값을 적용해야할 때 사용할 수 있다는 개념.

여기까지는 알고 있던 내용.

만약 단순히 문자열을 interpolate하는 경우에는 css 헬퍼 함수를 사용할 필요가 없다.
css 헬퍼 함수는 템플릿 리터럴 내부에 함수를 nterpolate하는 경우에 사용된다.

결국 css
템플릿 리터럴 안에서 또 템플릿 리터럴을 사용하려고 할 때 위의 에러가 나타난 것이다.

수정 후 코드

const Mole = styled.img<{ isShow: number }>`
  height: 8rem;
  margin-right: 1rem;
  animation: ${({ isShow }) =>
    isShow >= 0.9 &&
    css`${slideInAndOut} 1.1s linear infinite`};
  :active {
    height: 6rem;
  }
`;

css 헬퍼 적용 완료 에러 안녕~