[Styled-Components] keyframes

색깔이 계속 바뀌는 애니메이션

styled-components 에서는 keyframes를 따로 작성해야 한다.

const ColorChange = keyframes`
    0% {
        color: #697f6e;
      }
      20% {
        color: lightgray;
      }
      40% {
        color: #697f6e;
      }
      60% {
        color: gray;
      }
      80% {
        color: #697f6e;
      }
      100% {
        color: #697f6e;
      }
`;

const Color = styled.h1`
  width: 100%;
  display: flex;
  margin-top: 1em;
  font-size: 6em;
  justify-content: center;
  animation: ${ColorChange} 5s linear infinite;
`;