Styled-Components 의 애니메이션 과 Pseudo Selector 를 배워보자!

📌 css 에서 keyframe 을 사용한 animation 은 styled-components에서 어떻게 구현할까?

...(중략)

const animation1 = keyframes`
from {
  transform:rotate(0deg);
  border-radius: 0px;
}
to {
  transform:rotate(360deg);
  border-radius: 100px;
}
`;

...(중략)

const AnimationBox1 = styled.div`
  height: 200px;
  width: 200px;
  background-color: black;
  animation: ${animation1} 10s linear infinite;
`;

...(중략)

📌 styled-components 안에서 pseudo selector 를 이용할 수 도 있다! (전체코드)

const animation1 = keyframes`
from {
  transform:rotate(0deg);
  border-radius: 0px;
}
to {
  transform:rotate(360deg);
  border-radius: 100px;
}
`;

const animation2 = keyframes`
0% {
  transform:rotate(0deg);
  border-radius: 0px;
}
50% {
  transform:rotate(360deg);
  border-radius: 100px;
}
100% {
  transform:rotate(0deg);
  border-radius: 0px;
}
`;

const AnimationBox1 = styled.div`
  height: 200px;
  width: 200px;
  background-color: black;
  animation: ${animation1} 10s linear infinite;
`;

const AnimationBox2 = styled(AnimationBox1)`
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${animation2} 10s linear infinite;

//아래와 같이 사용도 된다!🔥
  span {
    font-size: 20px;
    &:hover {
      font-size: 60px;
    }
    &:active {
      font-size: 100px;
    }
  }
`;

function App() {
  return (
    <>
      <AnimationBox1 />
      <AnimationBox2>
        <span>😊</span>
      </AnimationBox2>
    </>
  )
}

📌 결과물 

📌 styled-components 안에 또 styled-components 를 집어넣어 pseudo selector ${ } 를 이용할 수 도 있다.

...(중략)

const Emoji = styled.span`
  font-size: 36px;
`;

const AnimationBox1 = styled.div`
  height: 200px;
  width: 200px;
  background-color: black;
  animation: ${animation1} 10s linear infinite;
`;

const AnimationBox2 = styled(AnimationBox1)`
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${animation2} 10s linear infinite;

  ${Emoji} {
    font-size: 20px;
    &:hover {
      font-size: 60px;
    }
    &:active {
      font-size: 100px;
    }
  }
`;

function App() {
  return (
    <>
      <AnimationBox2>
        <Emoji>😊</Emoji>
      </AnimationBox2>
    </>
  )
}